html - z-index 不适用于列表元素？

Question

http://jsfiddle.net/ineomod/8NeyY/embedded/result/

HTML:

<section id="diamonds">
<ul>
    <li>
        <div class="container">
            <div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/geak_zps76747320.jpg)"></div>
            <span class="diamondText">
                <div class="zoomIcon"></div>
                "Geak" Interactive Magazine
            </span>
        </div>
    </li>
    <li>
        <div class="container">
            <div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/pink_zps8d76dfad.jpg)"></div>
            <span class="diamondText">
                <div class="zoomIcon"></div>
                "Pink" Magazine
            </span>
        </div>
    </li>
    <li>
        <div class="container">
            <div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/f3_zps57ac8198.jpg)"></div>
            <span class="diamondText">
                <div class="zoomIcon"></div>
                F3 "Celebrate In Style" Ad Campaign
            </span>
        </div>
    </li>
    <li>
        <div class="container">
            <div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/sgx_zps3a7e98c2.jpg)"></div>
            <span class="diamondText">
                <div class="zoomIcon"></div>
                SGX Infographic
            </span>
        </div>
    </li>
    <li>
        <div class="container">
            <div class="diamondImg" style="background:url(http://i979.photobucket.com/albums/ae280/ineomod/namecard_zps6a64c3f5.jpg)"></div>
            <span class="diamondText">
                <div class="zoomIcon"></div>
                m:idea Namecards
            </span>
        </div>
    </li>
</ul>

CSS: 在 fiddle 中

我将这个钻石画廊列为列表。每个元素都有一个标题。然而，我似乎无法使用 z-index 来确保标题位于所有其他 li 元素之上？它似乎只被后面的 li 元素覆盖。

Answer 1

尝试给予

#diamonds li:hover {
    position: relative;
    z-index: 1;
}

这将带来唯一的 <li>顶部是 :hover

Demo