html - 溢出-y和位置: absolute cause the offset when scroll bar is not at the top

Question

这是一个示例:https://jsfiddle.net/sunvom3a/

我有一个元素列表。

基本上是一个带有一些文本和下拉列表的容器。这个想法是，当您将鼠标悬停在文本上时，下拉列表应该直接位于下方(类似于工具提示)。

.container {
  overflow-y: scroll;
  height: 100px;
  border: solid 2px green;
}
.popup {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  display: none;
}
.item:hover .popup {
  display: block;
}

<div class="container">
  <div class="item"><span> Text1</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text2</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text3</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text4</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text5</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text6</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text7</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text8</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text9</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text10</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text11</span>
    <div class="popup"></div>
  </div>
</div>

位于 overflow-y 滚动条下方的前几个元素(按照我的分辨率，这些是前 5 项)效果很好:

但其余的都被破坏了 - 当移动滚动条时，此偏移量将作为弹出窗口和文本之间的距离添加:

有什么方法可以让列表中的所有元素保持一致的行为吗？

Answer 1

这在 Chrome 和 Edge 中展示(Firefox 按预期工作)。它根据初始的、视野外的位置计算相对位置。

您需要添加此...

.item{
  position: relative;
}

...使绝对定位的元素相对于悬停的元素定位。

fiddle :https://jsfiddle.net/sunvom3a/1/

---

上述解决方案的缺点是它会将工具提示移动到容器内，从而使其一部分可能无法看到。顺便说一句，我不确定这是否是一个很棒的用户界面，因为您正在使用工具提示覆盖其他选项。我建议将其附加到容器的父级(这样您也不必担心工具提示会在 View 之外。

正在添加到您的代码片段...

body{
    position: relative;
}

...始终将工具提示放在正文的右上角。通过为滚动容器添加一个容器可以更好地完成此操作，但这只是一个示例。

fiddle :https://jsfiddle.net/sunvom3a/2/