html - 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>