位置相對和z指數混淆

Question

的jsfiddle：

JSFiddle的問題

我在使用相對定位的元素圍繞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;
}

我想要的效果是任何'screen-component'，其中'active'類位於其他類之前; 盡管.active類的z-index高於.screen-component類，但是現在它們似乎都被賦予了新的行。

Answer 1

我想你想要這樣的東西：
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;
}

Answer 2

如果我理解你正在嘗試做什么，你需要的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;
}