html - 背景中的图像列表，CSS

Question

这是我的代码：

    #jackpots {
    position: relative;
    width: 228px;
    min-height: 30px;
    background: url(images/pattern.png) repeat;
    }

    .bottomImage {
    position: absolute;
    bottom: 0; 
    z-index: 1;
    }

    #jackpots ul {
    z-index: 2;
    }

HTML：

    <div id="jackpots>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    <img src"some.jpg" class="bottomImage">
    </div>

问题是： li 元素只有在它们下面没有图像时才能点击。我尝试使用更大的 z-index 数字，以防我的整个代码中已经有 1 或 2，但运气不好。

Answer 1

您需要更改 CSS：

#jackpots ul {
    position: relative;
    z-index: 2;
}

position将值更改为relative将允许z-index影响堆叠顺序，这是您想要的。