CSS position:absolute 不覆盖 position:relative 文本和边框

Question

position:relative div 中的 position:absolute 有问题。我一直在阅读有关 CSS 定位、堆叠上下文和相关问题的信息，但在玩过位置和 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>

其中 "wrap" div 是相对的，"hid" div 是绝对的，直到悬停在 "wrap" 上才会显示。问题是我希望隐藏的 div 出现在所有内容的前面，但由于它们的顺序 "hid1" 不覆盖 "wrap2" 文本和边框。

我怎样才能避免这种情况？如果可能，不修改容器 div，因为 "wrap" 将是相同注入代码的两个实例。

Fiddle

谢谢。

Answer 1

你可以给一个更高的 z-index 值。Fiddle

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

#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;
}

<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>

Answer 2

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

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

CSS position:absolute 不覆盖 position:relative 文本和边框

CSS position:absolute not covering position:relative text and borders

html

css

css-position