脱离文档流?
首先div设置absoluted绝对定位后,div会脱离文档流,因此不占据空间。
与div设置为relative相对定位不同,相对定位实际上被看作普通流定位模型的一部分。
absoluted相对于谁定位?
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
relative相对于谁定位?
相对于它在普通文档流中的位置。
脱离文档流后可以做什么?
绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
absoluted相对定位是相对于哪个盒子进行定位
相对于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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。