溢出：滾動div位置：絕對元素內

Question

我有一個表內溢出：滾動容器，表中有一些按鈕，當有人點擊它們，他們顯示上下文/工具提示（位置：絕對層）文本。

當我向右滾動，然後單擊按鈕，它移動外向右忽略滾動：

使相對容器位置解決位置問題，但它出現在容器內不顯示菜單：

我需要幫助得到以下所需的行爲：

這是片段：

.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

將上下文div放在溢出div的外部，並根據鼠標位置對其進行定位。

showContext = function() { 
 
    var e = window.event; 
 

 
    var posX = e.clientX; 
 
    var posY = e.clientY; 
 
    var context = document.getElementById("contextual") 
 
    context.style.top = posY + "px"; 
 
    context.style.left = posX + "px"; 
 
    context.style.display = "block"; 
 
}

.container{ 
 
    width:200px; 
 
    height:100px; 
 
    overflow:scroll; 
 
    position:relative; /* removing this solves the problem, but .contextual moves to the original position */ 
 
    z-index:1; 
 
} 
 
.board{ 
 
    width:400px; 
 
} 
 
#contextual{ 
 
    display:none; 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:grey; 
 
    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="javascript:showContext();" /> 
 
      
 
     </td> 
 
     </tr> 
 
    </table> 
 
</div> 
 
<div id="contextual">This is a contextual help text.</div>

Answer 2

您可以使用overflow: auto。這將只在必要時顯示滾動條。此外，您可以從.contextual中刪除z-index: 2。