html - 相対位置と Z インデックスの混乱

Question

JSFiddle:

問題のJSFミドル

相対的に配置された要素で z-index に頭を包むのに少し苦労しています。このhtmlを考えると、「アクティブな」画面コンポーネントを他の2つの前に配置したいです（はい、この例では視覚的に見栄えがよくないことはわかっています...問題を基本に煮詰めました）：

<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 クラスよりも高いにもかかわらず、すべてに新しい行が与えられているようです。