absoluted定位和relative定位

2019年9月7日 161次阅读 来源: 湮慕鸢

脱离文档流？

首先div设置absoluted绝对定位后，div会脱离文档流，因此不占据空间。
与div设置为relative相对定位不同，相对定位实际上被看作普通流定位模型的一部分。

absoluted相对于谁定位？

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

relative相对于谁定位？

相对于它在普通文档流中的位置。

脱离文档流后可以做什么？

绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

absoluted相对定位是相对于哪个盒子进行定位

《absoluted定位和relative定位》

《absoluted定位和relative定位》

相对于div最近的（非static定位的）父级元素的borderbox进行定位。主要代码如下：

<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="margin: 0;border: 20px solid peru;position: relative; ">
<div 
    style="width: 100px;height: 10px;background: lightblue;position: relative; 
        left:10px;"></div>
<div id="out" 
    style="
        width: 200px;
        height: 200px; 
        background: firebrick;
        <!--改变下边的注释行看效果-->
        <!--position: relative;--> 
        border: 50px solid black;
        padding: 50px;">
    <div id="in" 
        style="width: 50px;
        height: 50px;
        background: grey; 
        position: absolute; 
        left: 0px;">
    </div>
</div>
</body>
    原文作者：湮慕鸢
    原文地址: https://segmentfault.com/a/1190000016380743
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞