如何逃避溢出：仅用一个元素隐藏？

Question

在将其标记为重复之前，请阅读以下内容： 我有一个具有绝对位置的菜单（容器），overflow-y 设置为滚动，overflow-x 被隐藏。当您将鼠标悬停在菜单的某些部分上时，我还会有工具提示，其中一些会溢出到菜单之外。由于某种原因，工具提示永远不会显示在容器之外，我尝试过绝对位置、z-index，甚至溢出-x:visible。这些都不起作用。例如：

CSS：

.menu {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: gray;
  overflow-y: scroll;
  overflow-x: visible;
}

.tooltip {
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: black;
}

<div class='menu'>
  <div class='tooltip'></div>
</div>

.tooltip {
position:absolute;
left:-5px;
top:0;
width:10px;
height:10px;
background-color:black;
}

HTML：

<div class='menu'>
<div class='tooltip'></div>
</div>

并且工具提示 div 不会显示在菜单之外。我无法更改菜单或工具提示上的位置，因为它们需要相对于任何其他工具提示和菜单。我有这个游戏的有效 jsfiddle：https://jsfiddle.net/fm6zrtuq/ 您需要做的就是按右上角的齿轮图标并将鼠标悬停在带有奖杯的图标上，您就可以明白我的真正意思。

Answer 1

据我了解，你想要实现这样的目标：

.menu {
  position: relative;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: gray;

}
.menu:hover .tooltip {
left: 5px;
}

.tooltip {
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: black;
  transition: .5s;
}

<div class='menu'>
  <div class='tooltip'></div>
</div>

Answer 2

您需要“固定”位置。设置对子元素的引用并确定其边界矩形和父边界矩形，然后根据需要定位该元素。

将来可能会出现一个可能的解决方案https://github.com/w3c/csswg-drafts/issues/9107