css 一段子绝父相的代码
2019-07-24 本文已影响0人
nickNic
首先看效果
EFE3D4C2-2840-4028-BA3D-23514A4AAF54.png
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.divtop{
margin: 0px auto;
margin-top: 100px;
background: red;
width: 300px;
height: 200px;
background: url("https://www.baidu.com/img/emoji_58912914459c4f54cdc3d61bd6eac927.gif");
background-repeat: no-repeat;
background-position: center;
position: relative;/*这个就是相对定位啦*/
}
.popular{
width: 10px;
height: 10px;
position:absolute;/*这个就是绝对定位啦*/
left: 0px;
top: 0px;
}
.price{
width: 50px;
height: 20px;
position:absolute; /*这个就是绝对定位啦*/
left: -10px;
bottom: 0px;
}
.divbottom{
margin: 0px auto;
background: red;
width: 300px;
height: 100px;
}
p{
text-align: justify;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="divtop">
<img class=“popular" src="https://www.baidu.com/img/emoji_58912914459c4f54cdc3d61bd6eac927.gif">
<img class="price" src="https://www.baidu.com/img/emoji_58912914459c4f54cdc3d61bd6eac927.gif">
</div>
<div class="divbottom">
<p>我就是你们的描述啦哈哈哈哈哈哈我就是你们的描述啦哈哈哈哈哈哈我就是你们的描述啦哈哈哈哈哈哈我就是你们的描述啦哈哈哈哈哈哈</p>
</div>
</body>
</html>
一般都是绝对定位和相对定位一起配合使用父视图因为是相对定位所以还在标准流中,而子视图是绝对定位已经脱离了标准流,但是由于定位流的特性->如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点.那么现在就是以divtop作为参考点了而不是以body了,接下来就根据业务需求来coding了!
