CSS定位絕對需要兄弟元素的相對位置

我有一個簡單的設置，我有一個漢堡包樣式菜單，可以啓用將主要內容向右滑動的關閉畫布菜單（something like this）。CSS定位絕對需要兄弟元素的相對位置

<div class="layout-wrapper" > 
    <div class="layout-menu"></div> 

    <header class="layout-header"></header> 

    <div class="layout-content"></div> 
</div>

所以我有一個容器div：layout-wrapper。

我有菜單：layout-menu，絕對定位，以便我可以把主要內容放在它上面。

我的頭：layout-header，擁有固定的定位，使其始終將保持在最前面，當我滾動內容

我有內容：layout-content。

我的問題是layout-content不可見，除非我將position: relative添加到它。爲什麼我必須這樣做？我犯了一個愚蠢的錯誤？

這是顯示問題的plunker。啓用CSS中的註釋行以查看應爲的外觀。

來源

2015-01-04 Joel

的問題是，.layout-menu是一個定位元素：

.layout-menu { 
    position: absolute; 
}

但是.layout-content不是：

.layout-content { 
    position: static; /* default value */ 
}

根據CSS 2.1 spec，

每個框屬於一個堆疊上下文。給定堆棧上下文中的每個框都有一個整數堆棧級別，這是它在相對於同一堆棧上下文中的其他框的z軸上的位置。具有較大堆棧級別的方框始終格式化爲具有較低堆棧級別的方框。 [...]

每個堆疊上下文包括以下堆疊水平（從後到前）：

背景和形成堆疊上下文的元素的邊界。

具有負堆棧級別的後代的堆疊上下文。

包含流內非內聯級別後代的堆棧級別。

浮標及其內容的堆疊級別。

流入內聯級別後代的堆棧級別。

定位後代具有'z-index：auto'的堆疊級別，以及任何後代堆疊具有'z-index：0'的上下文。

具有積極堆棧級別的後代的堆疊上下文。

這意味着，.layout-menu，其中落在堆放層6，將在.layout-content前面顯示，其在堆疊水平下降3

但是，如果你使用

.layout-content { 
    position: relative; 
}

現在.layout-content也將落入堆疊級別6。

然後，

框與在層疊上下文相同的堆棧級別是根據文檔樹順序堆疊後端到前。

因此，由於.layout-content自帶文檔樹.layout-menu後，.layout-content將在.layout-menu面前顯示。

來源

2015-01-04 23:17:57 Oriol

這是因爲一個元素需要具有比其它staticposition一個屬性（這是默認）爲z-index屬性工作。這意味着它不僅適用於position: relative。它也將與position: absolute和position: fixed一起使用。

Give this a read to understand z-index better

來源

2015-01-04 22:33:03 Anubhav

這不是一個錯誤，你必須設置position: relative爲layout-content因此它可以重疊layout-menu。

在您的關閉畫布菜單示例中，內容也有position: relative。

來源

2015-01-04 22:38:16 mxpln

CSS定位絕對需要兄弟元素的相對位置

回答

相關問題