定位上下文（补充css的position属性）

时间 2019-11-08

原文原文链接

把元素的position属性设定为relative、absolute或fixed后，继而能够使用TRBL属性，相对于另外一个元素移动该元素的位置。这里的“另外一个元素”，就是该元素的定位上下文。css

绝对定位元素的默认上下文是body。然而绝对定位元素的任何祖先元素均可以成为它的定位上下文，只要把相应的祖先元素的position设定为relative便可。html

<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属性才会起做用。code

这时给内部设定为绝对定位：htm

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元素向下、向左偏移其位置。
it

这时若是把外部div的position属性设定为relative。io

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，这时效果以下图所示：class