Stacking

by mgiuffrida

HTML

<div id="list">
    <div class="item"> Item 1 </div>
    <div class="item"> Item 2 </div>
    <div class="item"> Item 3 </div>
    <div class="item"> Item 4 </div>
    <div class="item"> Item 5 </div>
    <div class="item"> Item 6 </div>
</div>

CSS

#list :nth-child(3) {
    position: fixed;
    top: 2px;
    height: 100px;
    background-color: grey;
    opacity: .9;
}

#list :nth-child(5) {
    position: relative;
    /** z-index is "auto", so why does this render
        on top of the position: fixed item?
        answer: when elements don't have a z-index, positioned
        elements are stacked on top of non-positioned elements
    */
}