html - <ul> 列表背景图片，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 影响堆叠顺序，这正是您想要的。