ポジションを作る：通常、別のスクロール可能なdivの中の絶対divスクロール

Question

position:fixedを使用して、すべてのページ要素にスクロール可能な固定スクロール<div id="overlay">があります。 divには固定高さよりも高い要素があるので、スクロールバーが表示されます。私は、それがスクロールされていても段落にとどまりたいツールチップを持っています。

私はここに起こるしたいものですが、残念ながらどちらも私の解決策のが正しく動作：

1. 私は、ツールチップとposition:relative#overlayに（ツールチップの親）にposition:absoluteを追加：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はコンテナではなくページに関連するため、2番目のシナリオで表示された理由があります。つまり、コンテナのプロパティ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を参照してください。