Question

我的位置有问题：绝对内部位置：相对div。我在这里一直在阅读有关CSS定位，堆叠上下文和相关问题的内容，但在使用position和z-index后，似乎没有什么能解决我的问题。

具有以下结构：

<div id='container1'>
    <div id='wrap1'>
        <div id='item1'>item1</div>
        <div id='hid1'>hidden1</div>
    </div>
</div>
<div id='container2'>
    <div id='wrap2'>
        <div id='item2'>item2</div>
        <div id='hid2'>hidden2</div>
    </div>
</div>

其中＆＃34;包装＆＃34; div是相对的，＆＃34; hid＆＃34; div是绝对的，直到徘徊＆＃34; wrap＆＃34;才显示。那些。问题是我希望隐藏的div出现在所有东西的前面，但是由于它们的顺序＆＃34; hid1＆＃34;不涵盖＆＃34; wrap2＆＃34;文字和边框。

我该如何避免？如果可能的话，不修改容器div，因为＆＃34; wrap＆＃34;将是相同注入代码的两个实例。

Fiddle

感谢。

Answer 1

您可以提供更高的z-index值。Fiddle

＆＃13;

$('#wrap1').hover(
                function() { $('#hid1').show(); },
                function() { $('#hid1').hide(); }
            );
$('#wrap2').hover(
                function() { $('#hid2').show(); },
                function() { $('#hid2').hide(); }
            );

＆＃13;

#wrap1,#wrap2{
    position:relative;
    border: 1px solid black;
}

#hid1 {
    z-index:100;
    height:50px;
    width:100px;
    position:absolute;
    display:none;
    top:2px;
    background-color:cyan;
}
#hid2 {
    z-index:100;
    height:50px;
    width:100px;
    top:-10px;
    position:absolute;
    display:none;
    background-color:cyan;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='container1'>
    <div id='wrap1'>
        <div id='item1'>item1</div>
        <div id='hid1'>hidden1</div>
    </div>
</div>
<div id='container2'>
    <div id='wrap2'>
        <div id='item2'>item2</div>
        <div id='hid2'>hidden2</div>
    </div>
</div>

＆＃13;

Answer 2

为此使用z-index CSS属性。但请确保，z-index仅在您指定位置时才有效。

#hid1, #hid2 {
    position: absolute;
    z-index: 1337;
    /* other CSS code */
}

CSS位置：绝对不覆盖位置：相对文本和边框

2 个答案: