position:absolute 入门理解

最新推荐文章于 2023-10-21 09:42:12 发布

写代码的疯子

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/u010411682/article/details/47421991

版权

position:absolute 绝对定位，参照点为浏览器左上角，依据TRBL[top、right、bottom、left]进行定位。
在两个div处于父子级关系的情况下，有以下3种情况
1.父级div和子级div同时设定position:absolute，并且同时设定TRBL，父级div参照浏览器左上角依据TRBL定位，而子级div参照父级div左上角依据TRBL进行定位，代码、图示如下

<div style="position:aboslute;left:20px;top:20px;width:100px;height:100px;background:#ccc;">
    <div style="position:absolute;left:30px;top:30px;width:40px;height:40px;background:#000;"></div>
</div>

这里写图片描述
2.父级div设定position:absolute，而子级div没有设定position属性，即使子级div设定了TRBL数值，子级div也不会根据TRBL定位，而是参照父级div左上角，top、left属性值为0，进行定位，其他子级div依次往下往下排列

<div style="position:absolute;top:20px;top:20px;width:300px;height:300px;background:#ccc;">div1
    <div style="top:120px;left:120px;width:150px;height:150px;background:#000;">
</div>

这里写图片描述
3,当父级div设定了position:absolute以及TRBL，而子级div设定了position:absolute;没有设定TRBL，那么子级div参照浏览器左上角依据父级TRBL进行定位

<div style="position:absolute;left:20px;top:20px;width:300px;height:300px;background:#ccc">
    <div style="position:absolute;width:150px;height:150px;background:#000;"></div>
    <div style="position:absolute;width:150px;height:150px;background:#000;"></div>
    <!--以上两个子级div设定了position:absolute但未设定TRBL，会重叠 两个div参考父级TRBL定位，相同的TRBL-->
</div>