父母的兄弟之上的元素

Question

我想要一個元素出現在父母的兄弟之上，但它只出現在下面。我曾嘗試更改z-index並使用浮動功能，但無法找到可行的解決方案。我希望將Stuff跨度保留在其父跨度內，因爲它與其相關，並且在禁用CSS時效果很好。

他是我到目前爲止http://jsfiddle.net/P3qwx/

HTML

<div class="grid"> 
    <span> 
     <h4>1</h4> 
    </span> 
    <span> 
     <h4>2</h4> 
     <span>Stuff</span> 
    </span> 
    <span> 
     <h4>3</h4> 
    </span> 
    <span> 
     <h4>4</h4> 
    </span> 
</div> 

CSS

.grid > span { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
    z-index: 5; 
} 

.grid > span > span { 
    background-color: #ff00ff; 
    display: inline-block; 
    width: 250px; 
    z-index: 10; 
} 

這是我得到的（FF30）

這就是我要

Answer 1

普拉迪普Pansari的回答是都不錯，但我想更多這樣解釋一下爲您的問題提供另一種解決方案

首先，您的z-index代碼根本不起作用。我們將添加position。你的CSS現在

.grid > span { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
    z-index: 5; 
    position:relative; 
} 

.grid > span > span { 
    background-color: #ff00ff; 
    display: inline-block; 
    width: 250px; 
    z-index: 10; 
    position:absolute; 
} 

這是結果http://jsfiddle.net/P3qwx/4/

這裏發生了什麼？爲什麼紫色塊仍然隱藏在第三和第四個黃色塊之下？

這是因爲每一個黃色的塊狀，有stacking context創建

所以長話短說，你的紫塊和它的z-index只需要第二黃色塊下的效果，它沒有任何權力下第三和第四個因爲不同的堆疊環境。這裏的層次結構

• 黃色塊1（z索引5）
• 黃色塊2（z索引5）
  • 紫色塊（z索引10）
• 黃色塊3（z索引5）
• 黃色塊4（z索引5）

一旦我們得到了這一點，固定簡單，要麼去除z-index和設置位置，絕對讓默認的堆疊規則需要照顧生意

Demo

.grid > span { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
} 

.grid > span > span { 
    background-color: #ff00ff; 
    display: inline-block; 
    width: 250px; 
    position:absolute; 

} 

或（我想你不希望這只是爲出於完整性起見，..）

Demo

HTML

<div class="grid"> 
    <span class="span1"> 
     <h4>1</h4> 
    </span> 
    <span class="span2"> 
     <h4>2</h4> 
     <span class="span5">Stuff</span> 
    </span> 
    <span class="span3"> 
     <h4>3</h4> 

    </span> 
    <span class="span4"> 
     <h4>4</h4> 

    </span> 
</div> 

CSS

.span1 { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
    position:relative; 
    z-index: 1; 
} 
.span2 { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
    position:relative; 
    z-index: 5; 
} 
.span3 { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
    position:relative; 
    z-index: 3; 
} 
.span4 { 
    background-color: #ffff00; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    vertical-align: top; 
    position:relative; 
    z-index: 4; 
} 

.span5 { 
    background-color: #ff00ff; 
    display: inline-block; 
    width: 250px; 
    position:absolute; 
    z-index:1;  
} 

Answer 2

你可以試試這個什麼：

Demo

.grid > span > span { 
    background-color: #ff00ff; 
    display: inline-block; 
    width: 250px; 
    z-index: 10; 
    position:absolute; 

}