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

Question

JSFiddle:

JSFiddle of the issue

我在使用相对定位的元素围绕 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”类的“屏幕组件”定位在其他组件的前面；然而现在他们似乎都被赋予了新的行，尽管 .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;
}