定位上下文（補充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