css - 固定位置を尊重するように z-index を強制する

Question

残念ながら、私は z-index を正しく理解していないため、CSS を希望どおりにレイヤー化できません。一番下の固定divの上に浮かぶ説明を取得しようとしていますが、これはz-indexで簡単だと思いました.ページ上の他の2つのユニットよりも高い3のインデックスを付けてください. しかし、何らかの理由で期待どおりに動作していません - 誰でも理由を教えてもらえますか?

HTML の例:

<div id="wrapper">
    <div class="portfolio-slideshow">
        <div class="slideshow-meta">
            <p class="slideshow-title">My Title</p>
        </div>
    </div>
</div>
<div id="footer-hairline">
</div>

CSS:

#wrapper {
    margin: 0 190px 0 100px;
}
.portfolio-slideshow {
    margin: 10px 0 0;
    z-index: 1;
    clear: both;
    position: relative;
}
.slideshow-meta {
    position: fixed;
    bottom: 30px;
    font-size: 13px;
    color: #989799;
    line-height: 14px;
    z-index: 3;
}
#footer-hairline {
    height: 70px;
    width: 100%;
    border-top: 1px solid #CCC;
    background: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.portfolio-slideshow の z-index を削除すると、期待どおりに機能します。しかし、なぜ私はそれをしなければならないのですか？ここに何かが欠けていますが、何がわかりません。

ここでデモを行うために JS Fiddle を作成しました: http://jsfiddle.net/qZzYM/1/