html - ul 中的堆叠问题

Question

我在 HTML 页面中的元素堆叠方面遇到问题。我需要让 span (class="class_span") 具有比 div (class="class_div"更高的堆叠顺序)带边框。我尝试过更改 z-index 但没有成功。我知道我不应该使用绝对位置，但页面依赖于它，抱歉。我怎样才能做到这一点？

HTML:

<ul>
    <li>
        <div class="class_div">
        </div>
        <span class="class_span">
            <a href="google.com">google</a>
        </span>
    </li>
</ul>​

CSS:

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
}
.class_span{
    float: left;
}​

Live DEMO

Answer 1

将 position:relative 添加到范围，以便您可以在其上应用 z-index。请注意，跨度的 z-index 必须高于 div 的 z-index，以便它显示在 div 上方:

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
    z-index: 1;
}
.class_span{
    float: left;
    position: relative;
    z-index: 10;
}​

<强> Example

编辑:

作为 float: left 的替代方案，您可以考虑使用 position:absolute 并将 left 设置为 0px >:

.class_span{
    position: absolute;
    left: 0;
    z-index: 10;
}​

您可能还需要设置 top，并且可能还需要将父元素的 position 设置为 relative，以便跨度可以相对于该父元素定位。