Html 嵌套固定定位的 Div 滚动条渗透到前景中的 Div

发布于01月24日

我有两个嵌套的div，它们都是position: fixed.外部div保存文本内容，并使用定义的高度和overflow-y: auto在内部滚动.内部div表示包含表示操作的链接的弹出菜单.弹出菜单向右偏移，因此它与Content-div及其滚动条略有重叠.

当我在内部div中的链接上悬停(或想要点击)时，它会按预期工作，除非鼠标移到链接的一部分，该部分也悬停在弹出菜单div后面呈现的滚动条上.

这codepen个数字说明了这个问题.

我可能会更改HTML，但我更喜欢使用css的解决方案，它允许我将鼠标悬停在标记的位置上，并仍然"激活"链接，而不是可视化地位于div后面的滚动条.

推荐答案

你不能做你想做的事情，如果你直接嵌套了固定的parent-child，它将不会工作

html的 struct 必须如下所示

<div class="wrapper"> <<<<< this is fixed
   <div class="internal-scroll"> <<<<< this is relative
       <div class="overlay"> <<<<<< this is fixed
          <a>hover me, where the scrollbar is</a>
      </div>
   </div>
</div>

.wrapper {
  position: fixed;
  // add top, right, bottom, left
}

.internal-scroll {
  top: 5px;
  left: 5px;
  width: 200px;
  height: 200px;
  overflow-y: auto;
  border: LightCoral 2px solid;
}

.overlay {
  position: fixed;
  top: 40px;
  left: 160px;
  width: 100px;
  padding: 5px;
  background: aliceblue;
  border: solid 2px SlateBlue;
  z-index: 999;
  
}

.overlay a:hover {
  background: green;
  cursor: pointer;
}

<div class="wrapper">
  <div class="internal-scroll">
    <div class="overlay">
    <a>hover me, where the scrollbar is</a>
  </div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </div>
</div>

另外，请记住，固定元素不同于绝对元素，不要以任何上升relative的父元素作为定位参考，它们以视区为参考.所以实际上没有必要有fixed,parent-child个元素.

你可以把overlay放在internal-scroll之外，然后就会有同样的行为.

请参见示例:

.internal-scroll {
  position: fixed;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 200px;
  overflow-y: auto;
  border: LightCoral 2px solid;
}

.overlay {
  position: fixed;
  top: 40px;
  left: 160px;
  width: 100px;
  padding: 5px;
  background: aliceblue;
  border: solid 2px SlateBlue;
  z-index: 999;
  
}

.overlay a:hover {
  background: green;
  cursor: pointer;
}

<div class="internal-scroll">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>
<div class="overlay">
    <a>hover me, where the scrollbar is</a>
</div>