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：在小提琴

我将这个钻石画廊列为清单。每个项目都有一个标题。但是，我似乎无法使用z-index来确保标题保持在所有其他li元素之上？它似乎只能被追随它的li元素所覆盖。

Answer 1

尝试给予

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

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

Demo

Answer 2

<强> Demo

您似乎需要更新每个li元素的z-index，从高到低更新如下

<li style="z-index: 4;">....</li>
<li style="z-index: 3;">....</li>
<li style="z-index: 2;">....</li>
<li style="z-index: 1;">....</li>
<li style="z-index: 0;">....</li>

此处样式内联标记仅用于通过使用jQuery

计算的演示目的

z-index不能处理列表元素？

2 个答案: