我有一个特定的用例,其中有一个带有一些导航项的边栏,并且希望在悬停时扩展元素。左div上悬停的项目应与右div重叠。
如果我将列表项设置为absolute
,则基本上可以使用。
唯一的问题是,缩放或滚动溢出时它们的位置不再“良好”。
要解决此问题,我可以将父级设置为relative
。但是,这改变了堆叠行为,我无法再重叠正确的div。
有什么方法可以使左侧项目与右侧div重叠,而在缩放或滚动时不影响其位置?
.container {
display:flex;
}
.left {
width:49vw;
height:50vh;
background-color:yellow;
overflow-y:auto;
overflow-x:hidden;
}
.right {
width:49vw;
height:50vh;
background-color:green;
position:relative;
//position:absolute;
//left:49vw;
z-index:1
}
li {
position:relative; //affects scrolling/zooming behaviour if not used
}
.item-text:hover {
background-color:red;
width:80vw;
position:absolute;
z-index:2;
}
<div class="container">
<div class="left">
<div class="list-container">
<ul>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
</ul>
</div>
</div>
<div class="right">
</div>
</div>
.container {
display:flex;
}
.left {
width:49vw;
height:50vh;
background-color:yellow;
overflow-y:auto;
overflow-x:hidden;
}
.right {
width:49vw;
height:50vh;
background-color:green;
position:relative;
//position:absolute;
//left:49vw;
z-index:1
}
li {
//position:relative; //affects scrolling/zooming behaviour if not used
}
.item-text:hover {
background-color:red;
width:80vw;
position:absolute;
z-index:2;
}
<div class="container">
<div class="left">
<div class="list-container">
<ul>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
<li><div class="item-text">
1
</div></li>
</ul>
</div>
</div>
<div class="right">
</div>
</div>
jsfiddle
最佳答案
您使用z-index的方向正确。关于z-index的棘手部分是,它仅覆盖其父元素中的堆叠顺序,并且仅适用于具有非静态position属性(默认值除外)的元素。在您的CSS中,.right
div上的z-index为1,而.item-text
z-index为2。尽管看起来应该可以,但.item-text
仍在.left
div中,其z -index默认为auto
,这会将它及其所有内容放在.right
div下面。
但是,我们可以通过在父元素上设置z-index来更改此设置。下面,我没有在li
元素或其内容上设置较高的z-index,而是在黄色div上设置了较高的z-index,以使其(及其子元素)与其同级重叠。然后,黄色div的溢出将高于绿色div。
您可以在此处阅读有关z-index的更多信息:https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
.container {
/*We can either use flex positioning, or a combination of float and relative positioning
below to achieve the desired layout.*/
display:flex;
}
.left, .right {
display:inline-block;
width:50%;
height:200px;
/* Below is an alternate way of arranging the elements to get the same result.
I find this useful because it explicitly sets the position property.*/
/*
float:left;
position:relative;
*/
}
.left {
background: yellow;
z-index:2;
overflow:visible;
}
.right {
background: green;
z-index:1;
}
li:hover {
background: red;
width:120%;
}
<div class="container">
<div class="left">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
<div class="right">
</div>
</div>