Position relative and z-index confusion

Question

JSFiddle:

JSFiddle of the issue

I'm having a bit of trouble wrapping my head around z-index with relatively positioned elements. Given this html I want the 'active' screen-component to be in front of the other two (yes I know this visually doesn't look good in this example... I've boiled down the problem to the basics):

<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>

And this css:

.parent-container {
    position: relative;
}

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

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

The desired effect I want is any 'screen-component' with the 'active' class to be positioned in front of the other ones; however right now they all seem to be given new lines, despite the .active class having a z-index higher than the .screen-component class

Answer 1

I think you want something like this:
http://jsfiddle.net/ZCBXA/3/

(The background colors are just for demonstration purposes)

.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;
}