相對位置和z-index的混亂

我有一點麻煩纏繞我的頭周圍的z-index與相對定位元素。鑑於這個HTML，我希望'主動'屏幕組件在其他兩個前面（是的，我知道這個視覺效果在這個例子中看起來不太好......我把這個問題歸結爲基礎知識）：

<div class="parent-container"> 
    <div class="screen-component"> 
     Content inside first screen component 
    </div> 
    <div class="screen-component"> 
     Content inside second screen component 
    </div> 
    <div class="screen-component active"> 
     Content inside active component.. I want this up top 
    </div>  
</div>

這CSS：

.parent-container { 
    position: relative; 
} 

.screen-component { 
    position: relative; 
    z-index: 2000; 
} 

.screen-component.active { 
    position: relative; 
    z-index: 5000; 
}

所需的效果我想是任何「屏幕組分」與待定位在其他的前面的「主動」類;但是現在他們似乎都被賦予新的生產線，儘管。主動類具有比。屏幕分量級更高的z-index

來源

2013-04-15 Msencenb

我相信'z-index'在jsFiddle中不起作用。只是incase你只是試圖在那裏 – sourRaspberri

不幸的是，它不是在我的開發環境中工作 – Msencenb

我認爲你誤解z-index ...這是爲了深入，把東西放在後面，在其他東西前面，而不是在上面或下面。 –

我想你想是這樣的：
http://jsfiddle.net/ZCBXA/3/

（背景顏色只是用於演示）

.parent-container { 
    position: relative; 
} 

.screen-component { 
    position: absolute; 
    z-index: 2000; 
    top:0px; 
    left:0px; 
    background-color: #f00; 
} 

.active { 
    z-index: 5000; 
    background-color: #0f0; 
}

來源

2013-04-15 17:27:30 Arbel

而不是強制特定的背景顏色，只需給.screen-component a z -1和.active的z索引爲0的指數。 –

好的建議，背景顏色僅用於演示目的。用該註釋更新了答案。 – Arbel

如果我理解你想要正確地做什麼，你需要position: absolute;不position: relative;。然後給div類添加一個頂級值，以便所有具有該類的div與頂部的距離相同，z-index爲-1以隱藏它們。活動類唯一需要的是比其他類更高的z-index。

.parent-container { 
    position: relative; 
} 

.screen-component { 
    position: absolute; 
    top:0; 
    z-index: -1; 
} 

.screen-component.active { 
    z-index: 0; 
}

來源

2013-04-15 17:27:46

謝謝......你和阿貝爾都是對的 – Msencenb

相對位置和z-index的混亂

回答

相關問題