帶固定元素的z-index

我試圖讓頁面上的元素正確顯示。佈局看起來像這樣。帶固定元素的z-index

<div id='middle' style='position: fixed; z-index: 50;'></div> 
<div id='bottom' style='position: fixed; z-index: 0;'> 
<div id='top' style='position: fixed; z-index: 100;'></div> 
</div>

所以我想底部的div是在底部，並嵌套在一個div將出現在頂部，和相鄰的股利是在中間。目前它正在出現（按照顯示順序從上到下）：中間，頂部，底部，但我希望它顯示頂部，中間，底部。

嵌套對頂部div來說非常重要，它可以訪問底部div作爲父對象，中間div可以獨立於另外兩個。

我使用內聯CSS把這個問題侷限和省時，省錢舉辦CSS頁面

來源

2013-03-01 David Shears

，則必須使用三個獨立的div。在'＃bottom'位於'＃middle'之下的那一刻。 '＃top'是'＃bottom'的孩子，這意味着它也在'＃middle'之下（獨立於它的'z-index'，因爲它是相對於下一個定位的父親。 – 2013-03-01 19:05:48

即使他們使用固定定位？我認爲固定是絕對的延伸，因此相對定位不會影響這種情況 – 2013-03-01 19:08:05

這可能會澄清：http://stackoverflow.com/questions/1384604/css-positionfixed-inside-of-position-fixed – bmavity 2013-03-01 19:11:17

總之的麻煩，而無需改變你的標記，你不能做什麼你之後。「中」和「下」的z-索引將生效，但「上」不會出現在「中」之上。這是因爲「中」和「底」是兄弟姐妹 - 作爲一個子元素，「頂」不能超過父母的Z-索引。

來源

2013-03-01 19:10:30 chipcullen

我現在明白了。謝謝，我會找出一個解決方法。一個快速的解決方案，我缺乏HTML專業知識可能忽略了 – 2013-03-01 19:15:59

我不知道如何綁定你的手是在標記方面，但一個超級kludgy工作將是用JS操縱DOM。不過，我會盡量避免這種情況。 – chipcullen 2013-03-01 19:20:12

試試這個：

<div id='middle' style='position: fixed; z-index: 50;width: 100px; height: 100px; background: red; top: 100px;'></div> 

    <div id='bottom' style='position: fixed; z-index: 0; width: 100px; height: 100px; background: blue; bottom: 0px;'> 
     <div id='top' style='position: fixed; z-index: 100; width: 100px; height: 100px; background: green; top: 0px;'></div> 
    </div>

來源

2013-03-01 19:11:27

這產生了和我以前相同的結果，顏色的添加只是在視覺上顯示我的問題。謝謝 – 2013-03-01 19:15:21

好嗎？我的結果是頂部，中間，底部，而不是中間，頂部，底部 – 2013-03-01 19:18:24

你是什麼顯示是一個對象相對於Y軸的頂部中間底部。我正在尋找沿z軸對象的重組。更像分層而不是定位。感謝您的幫助 – 2013-03-22 17:40:41

帶固定元素的z-index

回答

相關問題