脱离文档流?

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

absoluted相对于谁定位?

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

relative相对于谁定位?

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

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

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


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

clipboard.png

clipboard.png

相对于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>





湮慕鸢
9 声望0 粉丝

前端小白