css3之position相对定位和绝对定位以及固定定位的区别
程序员文章站
2022-04-25 19:30:40
...
相对定位：相对定位：相对于自己原来的位置！
绝对定位： 绝对定位：相对于最近的非static定位(有定位的)祖先元素
* {
// 默认值：无任何定位
position: static;
// 相对定位：相对于自己原来的位置！
position: relative;
// 绝对定位：相对于最近的非static定位(有定位的)祖先元素
position: absolute;
// 固定定位：相对于屏幕视口（viewport）的位置！
position: fixed;
}<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>这个案例很好的解释绝对定位：相对于最近的非static定位(有定位的)祖先元素
这里的关键是div2，div2没有设置任何定位，就是非static定位，那么div3就相当于div1(最近的有定位的祖先)来定位！
.div1 {
width: 500px;
height: 300px;
background: red;
position: absolute;
top:50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}
.div2 {
width: 100px;
height: 200px;
background: blue;
margin: 20px;
}
.div3 {
width: 200px;
height:100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
上一篇： [黑科技]造一组树的数据