固定位置div低于相对位置

Question

在stackoverflow上有很多这样的问题，但我检查的所有问题都与我的问题完全相反。
我有一个固定的位置div和一个相对定位的跨度：

<div class="head-wrap">
...
</div>
....
<span class="img-desc" id="main">HTML Lesson - Part 1</span>

CSS：

.img-desc {
    position:relative;
    background:rgba(5,1,20,.8);
    color:yellow;
    padding:15px;
}
#main {
    top:-150px;
    left:8px;
    font-size:2.4em;
    z-index:2 !important;
}
.head-wrap {
    z-index:50;
}

根据我的阅读，固定位置div应该通过相对定位的跨度。然而它并没有！如何让div通过跨度，而不是相反。 FIDDLE