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的棘手部分是，它仅覆盖其父元素中的堆叠顺序，并且仅适用于具有非静态position属性（默认值除外）的元素。在您的CSS中，.right div上的z-index为1，而.item-text z-index为2。尽管看起来应该可以，但.item-text仍在{ {1}} div，其z-index默认为.left，它将其及其所有内容放在<{>} 下方。

但是，我们可以通过在父元素上设置z-index来更改此设置。下面，我没有在auto元素或其内容上设置较高的z-index，而是在黄色div上设置了较高的z-index，以使其（及其子元素）与其同级重叠。然后，黄色div的溢出将高于绿色div。

您可以在此处详细了解有关z-index的信息：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

.right

li

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

1 个答案: