元素z-index css屬性

我有3個元素，兩個在同一級別，和一個孩子，都有固定的位置。我需要設置z-index屬性以將父級放置在底部，將元素放在中間的同一級別上，並將子級放在頂部。元素z-index css屬性

我試過爲孩子設置一個更高的z-index，但它不工作。

<div class="red"> 
    <div class="blue"></div> 
</div> 
<div class="green"></div>

這裏的情況http://jsfiddle.net/udENm/21/（我需要在中間red底部，和blue上面，在同級別仍保持red和）。

我的CSS是這樣

.red { 
    position: fixed; 
    z-index: 2; 
} 

.green { 
    position: fixed; 
    z-index: 2; 
} 

.blue { 
    position: fixed; 
    z-index: 5; 
}

來源

2012-10-22 Gabriel Diaconescu

當你說你需要紅色和綠色在同一水平上，你的意思是必要的，他們都有相同的z-index，還是隻需要它們在視覺上出現在相同的級別上？ –

@SimonCarlson不，它們不需要具有相同的z-index，但需要具有z-index，因爲它們可能包含在另一個元素中，並且可能具有z-index屬性集。 –

這裏的問題是雖然子元素具有另一個z索引集，但子元素將會繼承其父級的z索引。子元素z-index只與同一父元素中的其他子元素相關，而相同的z-index不會影響父元素之外的元素。請參閱下面的答案，它解決了您當前的問題。 –

綠色塊z-index需要低於紅色塊。我用這個CSS，而不是你貼一個：

.foo { 
    background: red; 
    position: fixed; 
    left: 50px; 
    top: 50px; 
    z-index: 2; 
    width: 100px; 
    height: 100px; 
} 

.bar { 
    background: green; 
    position: fixed; 
    left: 100px; 
    top: 100px; 
    z-index: 1; 
    width: 100px; 
    height: 100px; 
} 

.child { 
    background: blue; 
    position: absolute; 
    top:50%; 
    left:50%; 
    z-index: 5; 
    width: 50px; 
    height: 50px; 
}

工作正常，你可以看到綠色的是現在的z-index 1，紅色的z-index 2和藍色塊具有絕對定位。

來源

2012-10-22 15:11:46

的z-index屬性只具有含硫元素的stacking context內生效。換句話說，如果在同一個父元素中有一堆塊元素，可以很容易地控制它們的前後順序。但是，z-index只能控制此父元素中的前後排序，而不能在全局上下文中進行排序。

所以，你可以在.red之內往回移動.blue。您也可以在z平面周圍切換.red和.green。但是，您不能在.red和.blue之間放置.green，因爲它們處於不同的堆疊環境中。

編輯堆棧上下文僅適用於流中的元素。如果你使用position:absolute，那麼你可以做到這一點。請參閱Rick Calder的回答

來源

2012-10-22 15:09:51 Dancrumb

將您的位置設置爲絕對值，並完全從父div（紅色）移除z-index。 http://jsfiddle.net/calder12/udENm/32/

.foo { 
background: red; 
position: absolute; 
left: 50px; 
top: 50px; 
width: 100px; 
height: 100px; 
} 

.bar { 
background: green; 
position: absolute; 
left: 100px; 
top: 100px; 
z-index: 2; 
width: 100px; 
height: 100px; 
} 

.child { 
background: blue; 
position: absolute; 
left: 40px; 
top: 40px; 
z-index: 5; 
width: 50px; 
height: 50px; 
}

來源

2012-10-22 15:10:04

Z-index is relative in a way to the parent。紅色已經在2，而藍色只有z-index 5與其兄弟姐妹相比，但不是像Green那樣的外部元素。

每個堆疊上下文都是獨立的：在堆疊元素的內容之後，整個元素被視爲父堆棧上下文的堆疊順序。

來源

2012-10-22 15:10:38 Brian

有點這樣嗎？

http://jsfiddle.net/kBv7R/

HTML

<div class="foo"> 
     <div class="child"></div> 
     <div class="bar"></div> 
    </div>

CSS

.foo { 
    background: red; 
    position: fixed; 
    left: 50px; 
    top: 50px; 
    z-index: 2; 
    width: 100px; 
    height: 100px; 
} 

.bar { 
    background: green; 
    position: fixed; 
    left: 100px; 
    top: 100px; 
    z-index: 5; 
    width: 100px; 
    height: 100px; 
} 

.child { 
    background: blue; 
    position: fixed; 
    left: 90px; 
    top: 90px; 
    z-index: 6; 
    width: 50px; 
    height: 50px; 
}

來源

2012-10-22 15:14:53 SomeShinyObject

元素z-index css屬性

回答

相關問題