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

我的位置有问题：绝对内部位置：相对div。 我一直在这里阅读CSS定位、堆叠上下文和相关问题，但在玩了位置和z索引之后，似乎没有什么能解决我的问题

结构如下：

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

项目1
隐藏的
项目2
隐藏的2

其中“wrap”div为相对div，“hid”div为绝对div，在悬停“wrap”div之前不会显示。问题是我希望隐藏的div出现在所有内容的前面，但由于它们的顺序“hid1”不包括“wrap2”文本和边框

我怎样才能避免呢？如果可能，不修改容器div，因为“wrap”将是同一注入代码的两个实例

---

谢谢。

您只需给出更高的

z-index

值即可

$（'wrap1'）。悬停(
函数（）{$（'#hid1'）.show（）；}，
函数（）{$（'#hid1'）.hide（）；}
);
$（'#wrap2'）。悬停(
函数（）{$（'#hid2'）.show（）；}，
函数（）{$（'#hid2'）.hide（）；}
);
#wrap1，#wrap2{
位置：相对位置；
边框：1px纯黑；
}
#hid1{
z指数：100；
高度：50px；
宽度：100px；
位置：绝对位置；
显示：无；
顶部：2个；
背景色：青色；
}
#hid2{
z指数：100；
高度：50px；
宽度：100px；
顶部：-10px；
位置：绝对位置；
显示：无；
背景色：青色；
}

项目1
隐藏的
项目2
隐藏的2
为此使用z索引CSS属性。但请确保，z索引仅在指定位置后才起作用

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

现在我看到它对我不起作用，因为我也在为“wrap”设置z索引。谢谢为了简洁起见，我接受了另一个答案，但威尔·厄普特（will upvote）。这对我不起作用，因为我也在为“wrap”设置z索引。谢谢