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的{{1}}，以使其显示在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，以便跨度可以相对于该父元素定位元件。

Answer 2

position:absolute将从流中删除元素。您需要position使用.class_span，z-index更高。

Answer 3

请检查一下。 http://jsfiddle.net/YMrLd/18/

以下CSS在小提琴链接中。

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

让我知道你需要一些不同的东西。如果没有帮助，请附上所需输出的屏幕截图。

堆叠在ul中的麻烦

3 个答案: