html - 位置相对和 z-index 混淆

Question

JSF中：

问题的 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;
}

我想要的效果是任何带有“活动”类的“屏幕组件”都位于其他组件的前面；但是现在它们似乎都被赋予了新的行，尽管 .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 类一个 top 值，以便该类的所有 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;
}