2

我在 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;
}​

现场演示

4

3 回答 3

2

添加position: relative到跨度，以便您可以z-index在其上应用。请注意，z-index您的跨度的 必须高于 的，div以便它出现在 之上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;
}​

例子

编辑：

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

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

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

于 2012-08-03T13:25:48.110 回答
1

position:absolute将从流中删除一个元素。您还需要使用更高position的..class_spanz-index

于 2012-08-03T13:25:02.927 回答
1

请检查这个。 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;
}​

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

于 2012-08-03T13:31:57.683 回答