CSS 絕對定位元素未設置 TRBL 時的默認定位行為深度解析

現象

#a { position: absolute; } 未設置 top/right/bottom/left。其兄弟元素 #b { margin-top: 100px; } 導致 #a 被「拖」下來，看似違背「脫離文檔流」認知。

核心真相：static 位置 (Static Position)

**絕對定位元素若未設置 TRBL，其默認位置正是「它在正常文檔流中原本應該在的位置」**，即 **static position**。這由包含塊的格式化上下文決定。

為什麼 #b 的 margin-top 會影響 #a？

1. #b 的 margin-top 作用於文檔流：正常流中，margin-top 推開的是**後續兄弟元素**，並傳遞給**父級 (body) 的邊距折疊**計算。
2. body 產生邊距折疊：#b 的 margin-top: 100px 與 body 的 padding-top: 0、border-top: 0 折疊，**body 實際內容區向下偏移 100px**。
3. #a 的 static position 基於 body 內容區：#a 未設置 TRBL，其 static position 計算基於 **body 的內容區起始位置**。body 內容區下移 100px → #a 的 static position 也下移 100px。
4. #a 脫離文檔流，但不脫離「定位參考系」：absolute 只脫離「佈局流」（不佔空間、不影響兄弟佈局），**不脫離「包含塊坐標系」**。其初始坐標 (0,0) 相對包含塊內容區原點，而該原點已被 body 邊距折疊下移。

對比驗證：第二個例子

#a { position: absolute; }、#b { position: absolute; }、#c { margin-top: 100px; }。
此時 #b 也 absolute，**脫離文檔流，不產生邊距折疊，不影響 body 內容區原點**。#c 的 margin-top 僅推動自身及後續正常流元素，**body 內容區原點不動** → #a static position 不動 → #a 不動。完全符合預期。

關鍵結論

• absolute 未設置 TRBL ≠ 固定在視口左上角，而是 **static position (正常流原位)**。
• 正常流兄弟元素的 margin 會通過邊距折疊移動包含塊內容區原點，進而移動 absolute 元素的 static position。
• 解決方案：給 absolute 元素**顯式設置至少一個 TRBL** (如 top: 0; left: 0;)，即鎖定位置，不再受 static position 變化影響。

規格引用

CSS 2.2 Spec Section 10.3.7：「For absolutely positioned elements... the used values of 'top' and 'bottom' are determined by the 'static position'...」