定位上下文（补充 css 的 position 属性）
最编程
2024-07-18 12:20:25
...
【直播预告】程序员逆袭 CEO 分几步？
把元素的position属性设定为relative、absolute或fixed后，继而可以使用TRBL属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。
绝对定位元素的默认上下文是body。然而绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应的祖先元素的position设定为relative即可。
<body>
<div id="outer">
<div id="inner">这是一个测试文档，测试定位上下文，定位属性和属性操作</div>
</div>
</body>div#outer{width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner{top:10px; left:20px; background:#ccc;}显示结果如图：
代码里给内部div设定了top和left属性，但是内部div并没有相对外部div向下移动10像素，向右移动20像素。原因在于内外部div默认都是静态定位，它们之间不存在谁是谁的定位上下文这个问题。换句话说，在常规文档流中，由于外部div没有内容，内部div就会跟它共享相同的起点。只有将position属性设定为relative、absolute或fixed，这个元素的TRBL属性才会起作用。
这时给内部设定为绝对定位：
div#outer{width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner{top:10px; left:20px; background:#ccc;position:absolute;}这时效果如图
由于没有相对定位的祖先元素供其参照，内部div只能以默认的定位上下文body作为参照，相对于它定位。此时，内部div完全无视其父元素的存在，TL属性会相对于body元素向下、向左偏移其位置。
这时如果把外部div的position属性设定为relative。
div#outer{width:250px; margin:50px 40px; border-top:3px solid red;position:relative;}
div#inner{top:10px; left:20px; background:#ccc;position:absolute;}绝对定位的上下文就变成了外部div，这时效果如下图所示：
上一篇： nio 缓冲区的容量、位置和限制。
下一篇： 位置有多少属性？