我有一个特定的用例,其中有一个带有一些导航项的边栏,并且希望在悬停时扩展元素。左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>

10-05 20:51
查看更多