創建一個位置：絕對div通常在另一個可滾動的div中滾動

Question

我有一個固定的高度可滾動<div id="overlay">使用position:fixed定位在所有頁面元素上。在div中，我的元素高於固定高度，因此滾動條出現。我也有一個工具提示，即使它滾動，我想留下一個段落。

這就是我想要在這裏發生的事情，但不幸的是我的解決方案都沒有正常工作：

1. 我將position:absolute添加到工具提示，將position:relative添加到#overlay（工具提示的父級）：http://jsfiddle.net/4qTke/

   工具提示按預期滾動但在#overlay外部不可見。

2. 我只將position:absolute添加到工具提示：http://jsfiddle.net/Yp6Wf/

   工具提示在父#overlay之外可見，但在滾動div時不會移動。

我希望工具提示始終可見和，以便在滾動時移動。

Answer 1

你想要什麼只用CSS和HTML是不可能的。

您遇到的主要問題是您在#tooltip相對於的容器上設置了overflow: scroll。由於這種溢出屬性出現其邊緣外的任何停止的內容時，當滾動到你的位置#tooltip的div它會被隱藏的「外」，只有可見。

它在您的第二個場景中可見的原因是因爲未設置position:relative您的#tooltip是相對於頁面而不是容器。這意味着它不受容器的overflow:scroll屬性的影響。

Answer 2

HTML：

<div id="overlay"> 

    <div class="elemRel"> 

     <div class="elemAbs"> 

      <!-- Your Code --> 

     </div> 

    </div> 

</div> 

CSS：

#overlay { position:fixed; } 
.elemRel { position:relative; } 
.elemAbs { position:absolute; } 

Answer 3

也許這是你的選擇嗎？見demo fiddle。