css堆棧順序，z-index

我不能爲我的生活弄清楚如何在不改變html結構的情況下在頂部獲取紅色。css堆棧順序，z-index

我怎麼頂得上衝？我有紅色的z-index值和位置的每個組合等

的HTML：

<div id="red"> 
    <div id="green"></div> 
</div>

的CSS：

div { 
    width: 300px; 
    height: 300px 
} 
#red { 
    background: red; 
    z-index: 10; 
    position: relative; 
} 
#green { 
    background: green; 
    width: 290px; 
    z-index: -10 
}

來源

2013-05-31 Nick Lang

我認爲你必須更改HTML結構......你能做到這一點的JavaScript，如果改變原有的HTML是困難的。 –

在z-index上推薦這些文章：http：//philipwalton.com/articles/what-no-one-told-you-about-z-index/和http://coding.smashingmagazine.com/2009/09/ 15/the-z-index-css-property-a-comprehensive-look/ –

取下育兒元件的Z-Index並給兩個元件相同position:規則。

概念證明：http://jsfiddle.net/GSBtG/2/#update

來源

2013-05-31 02:22:58

爲什麼-25？ -1不起作用？ – PSL

它會工作。你可以忽略25.我只是做更大的步驟，以防我需要在兩個元素之間放置東西。 –

Upvoted這個答案，因爲它的工作原理。但我想指出的是，發生的事情是綠色的是在紅色的後面，而不是綠色的前面的紅色，這是不可能實現的。 – pzin

設置對孩子產生負面z-index並刪除父母上的z-index。

#parent { 
    position: relative; 
} 
#child { 
    position: relative; 
    z-index: -10; 
}

jsFiddle

Source

來源

2013-05-31 02:22:05 Zhihao

css堆棧順序，z-index

回答

相關問題