如何扭轉嵌套的子元素的順序

HTML

<div class="a"> 
    <div class="b"> 
    <div class="c"></div> 
    </div> 
</div>

CSS

.a, .b, .c { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

.a { 
    background: red; 
    z-index: 999; 
} 

.b { 
    background: green; 
    margin: 40px; 
    z-index: 500; 
} 

.c { 
    background: gray; 
    margin: 40px; 
    z-index: 100; 
}

現在，我希望它是完全相反，即所有的紅色。我試着用z-index的位置設置爲relative，但它不起作用。這裏的jsfiddle演示

來源

2013-10-18 Ashish Rawat

只是可以肯定，你想要使用JavaScript或jQuery來對頂紅格，綠色中間灰色底部？ – mskydt86

無論何時嵌套元素，只要「z-index」值僅在比較兄弟節點時才相關，而不是在比較父子節點嵌套時重置堆棧上下文。無論z-index如何，父母總是會在孩子的後面。 – Terry

http://stackoverflow.com/questions/1806421/css-parent-element-to-appear-above-child –

你不能。父母將永遠在孩子後面，as z-index values are stacked。

渲染樹被繪製到畫布上的順序用堆棧上下文來描述。堆疊上下文可以包含更多堆疊上下文。從其父級堆疊上下文的角度來看，堆疊上下文是原子的;其他堆疊環境中的盒子可能不在其任何盒子之間。 - W3 http://www.w3.org/TR/CSS2/visuren.html#z-index

通過設置.a一個z-index，你還對所有的孩子設置相同的z-index。例如，通過在.a-.b和.c上設置z-index:999現在也具有相同的索引，將其無用。爲了達到這個目標，這些元素不能成爲另一個的父母或孩子，他們必須是兄弟姐妹才能工作。

這是它會是什麼樣子，如果他們是兄弟姐妹 - it works!

來源

2013-10-18 16:57:21

如何扭轉嵌套的子元素的順序

回答

相關問題