Html CSS让绝对元素与父元素重叠'；不影响滚动/缩放行为的同级

我有一个特定的用例，在这个用例中，我有一个带有列表中一些导航项的侧栏，并希望展开悬停上的元素。左分区中悬停的项目应与右分区重叠

如果我将列表项设置为绝对值，这基本上是可行的。 唯一的问题是，当在溢出中缩放或滚动时，它们的位置不再“良好”。 要修复此行为，我可以将父项设置为

relative

。然而，这改变了堆叠行为，我不能再重叠右div

有没有办法让左边的项目与右边的div重叠，而不影响它们在缩放或滚动时的位置

.container{
显示器：flex；
}
.左{
宽度：49vw；
高度：50vh；
背景颜色：黄色；
溢出y：自动；
溢出x：隐藏；
}
.对{
宽度：49vw；
高度：50vh；
背景颜色：绿色；
位置：相对位置；
//位置：绝对位置；
//左：49vw；
z指数：1
}
李{
位置：相对；//如果不使用，会影响滚动/缩放行为
}
.项目文本：悬停{
背景色：红色；
宽度：80vw；
位置：绝对位置；
z指数：2；
}

1.


1.


1.


1.


1.


1.


1.


1.

使用z-index，您走在了正确的轨道上。z-index的棘手之处在于，它只覆盖其父元素内的堆叠顺序，并且只适用于具有非静态位置属性（默认值除外）的元素。在CSS中，

.right

div上的z索引为1，

.item text

z索引为2。尽管它看起来应该可以工作，

.item text

仍然在

.left

div中，其z索引默认为

auto

，将其及其所有内容放在

.right

div下面

但是，我们可以通过在父元素上设置z索引来改变这一点。下面，我没有在

li

元素或其内容上设置更高的z索引，而是在黄色div上设置了更高的z索引，以使它（及其子元素）与其同级重叠。然后，黄色div的溢出将位于绿色div的上方

您可以在此处阅读有关z索引的更多信息：

.container{
/*我们可以使用flex定位，也可以结合使用浮动和相对定位
以实现所需的布局。*/
显示器：flex；
}
.左，.右{
显示：内联块；
宽度：50%；
高度：200px；
/*下面是排列元素以获得相同结果的另一种方法。
我发现这很有用，因为它显式地设置了position属性*/
/*
浮动：左；
位置：相对位置；
*/
}
.左{
背景：黄色；
z指数：2；
溢出：可见；
}
.对{
背景：绿色；
z指数：1；
}
李：悬停{
背景：红色；
宽度：120%；
}

项目1
项目2
项目3
项目4

使用：before很容易，但是否必须隐藏溢出-x:；左边？不，我不认为我需要溢出-x:隐藏。您将如何解决：before？感谢您对堆叠顺序的澄清和良好解释。这很接近，但我希望有

overflow-y:auto

。不幸的是，

overflow-x:visible

随后自动转换为

auto

，而且它似乎不再工作了。啊，我误解了你写的关于缩放/滚动的内容，认为你不希望它滚动。据我所知，出于某种原因，将一个溢出方向设置为自动覆盖另一个溢出方向，唯一的解决方法是使用额外的包装器。即使这样，我也不确定我们是否能为子元素获得所需的重叠效果。