position:absolute;绝对定位demo
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在img中上添加版心</title>
<style>
*{
margin: 0;
padding:0;
}
.banner{
width: 100%;
position:relative;
}
.banner-img{
width: 100%;
}
.banner .center{
position: absolute;
/* 进行绝对定位*/
/* 宽度是左边箭头的宽度56+中间宽度1088+右边箭头宽度。用来制作版心*/
width: 1200px;
/* 高度可以随便取值*/
height:300px;
/**/
top:50%;
left:50%;
margin-top:-150px;
margin-left:-665px;
/* 此时橙色盒子居中显示。只有绝对定位才能压盖住这张大的照片*/
}
/* 书写按钮的宽度和高度，同样使用绝对定位*/
.banner .center .left-btn{
position:absolute;
/*此时形成了子绝父绝*/
left: 0;
top:50%;
margin-top:-37px;
width: 56px;
height:74px;
background-color: rgba(0,0,0,.3);
}
.banner .center .right-btn{
position:absolute;
/*此时形成了子绝父绝*/
right: 0;
top:50%;
/*垂直居中，表示拉回负的height的一半*/
margin-top:-37px;
width: 56px;
height:74px;
background-color: rgba(0,0,0,.3);
}
.banner .center h2{
position:absolute;
width: 700px;
height:79px;
font-size: 40px;
font-family: 楷体;
color: rgba(74, 175, 206, 0.99);
font-weight: lighter;
/*top:50%;*/
/*margin-top: -79px;*/
/*left:88px;*/
}
.banner ol{
position:absolute;
width: 120px;
height:12px;
/**/
bottom:20px;
left:50%;
/*水平居中，表示拉回负的width的一半*/
margin-left:-60px;
list-style: none;
}
.banner ol li{
float: left;
width: 20px;
height:12px;
background-color: white;
margin-right: 10px;
border-radius: 10px;
}
/*最后一个没有margin*/
.banner ol li:last-child{
margin-right: 0;
}
.banner ol li.cur{
width: 30px;
background-color: rgba(74, 175, 206, 0.99) ;
}
</style>
</head>
<body>
<section class="banner">
<img class="banner-img" src="resource/src/image/3.jpg" alt="">
<div class="center">
<!--将要压盖图片的文字书写在此标签中-->
<h2>愿你做一道柔软的光，温暖别人的同时 终有一天也会照亮自己的路。</h2>
<!--按钮使用a标签操作-->
<a href="" class="left-btn"></a>
<a href="" class="right-btn"></a>
</div>
<!-- 小圆点！ol标签是绝对定位的，但是li是在里面浮动的-->
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
</ol>
</section>
</body>
</html>
标签：margin,top,height,width,demo,position,left,banner,absolute 来源： https://www.cnblogs.com/LiLi8866/p/16412387.html