css - 溢出:scroll div with position:absolute element inside

Question

我在溢出:滚动容器内有一个表格，表格内有一些按钮，当有人单击它们时，它们会显示上下文/工具提示(position:absolute层)文本。

当我向右滚动并单击按钮时，它会向右外侧移动，忽略滚动:

使容器相对位置解决了位置问题，但它出现在容器内而不显示菜单:

我需要帮助才能获得以下所需的行为:

这是片段:

.container{
  width:200px;
  height:100px;
  overflow:scroll;
  position:relative; /* removing this solves the problem, but .contextual moves to the original position */
}
.board{
  width:400px;
}
.contextual{
  display:none;
  position:absolute;
  width:100px;
  height:100px;
  margin: 20px;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
    <table class=board>
      <tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr>
      <tr>
        <td>this is a button with a contextual element</td>
        <td>
          <input type=button value="click me" onclick="$('.contextual').show();" />
          <div class=contextual>This is a contextual help text.</div>
        </td>
      </tr>
    </table>
</div>

Answer 1

对于遇到此问题但设置鼠标位置没有帮助的人

如果你有和我一样的问题，父容器设置为overflow:scroll并且父元素的子元素被切断，尽管position:absolute - do以下内容

例如，构建下拉列表的用例

• 将元素设置为位置:固定
• 获取父元素的视口(viewport)位置
• 将位置top、left、bottom、right值设置为视口(viewport)值

您可以使用与@jfeferman 中的代码片段相同的代码