I have a unique scenario where I want to create a sidebar with navigation items in a list that expand on hover. The challenge is to make the hovered item from the left div overlap the right div.
This functionality can be achieved by setting the list items as absolute. However, an issue arises when zooming or scrolling in the overflow as their position gets disrupted. To address this, placing them within a parent container set to relative helps maintain their original positions, but it also affects the stacking order and prevents overlapping the right div.
Is there any method to allow the left items to overlap the right div without interfering with their position during zooming or scrolling?
.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>