CSS 让绝对元素重叠父级的兄弟而不影响滚动/缩放行为

Question

我有一个特定的用例，我有一个侧边栏，其中包含列表中的一些导航项，并希望在悬停时展开元素。左侧 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

Answer 1

您在使用 z-index 时走在了正确的轨道上。关于 z-index 的棘手部分是它只覆盖其父元素内的堆叠顺序，并且它仅适用于具有非静态位置属性（除默认值之外的任何属性）的元素。在您的 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 的溢出将在绿色的上方。

您可以在此处阅读有关 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>