#container という 1 つの div がウィンドウ全体に広がり、グラフィックで満たされています。右側のコンテナ div の上に浮かぶバーが必要です。andを使用するposition:absoluteとright:0、#container div ではなく、ウィンドウに従って div が配置されます。
を使用するposition:relativeと、div は #container div に従って配置されますが、それでもスペースを占有し、#container コンテンツの上に移動しません。
これが私の試みで作った JSFiddle です。
を使用したくないことに注意float:rightしてください。これは、サイド div をコンテンツの流れに保持するためです。これは望ましくありません。
私はあなたが望むようにそれを手に入れたと思いますか？
親を作成する必要がposition: relativeあり、オーバーフローが必要ない場合は必要overflow: hiddenです。
position:absolute;配置された祖先と比較して要素を配置できます。
<div class="parent">
<div class="child">
</div>
</div>
.parent { position : relative; }
.child { position : absolute; }
これで、子は親に基づいて配置されます。position親にセットがない場合はposition、祖父母の を参照します...
...そして何度も、それらのどれにもpositionセットがない場合は、実際の Web ページの位置を調べます。
また、複数のpositioned 要素 (相対/絶対/固定) が同じ場所の近くにあり、ページで最後に設定された順序ではなく、CSS で設定した順序でそれらをオーバーラップさせたい場合.. .
...次に、使用を開始する必要がありますz-index(配置された要素でのみ機能します)。
高いほど、より多くのものを上に積み重ねることができます。
親positionのrelative
#container
{
position:relative;
}