0

絶対位置と相対位置の使用に少し混乱しています。基本的に、およそ 4 つの div を含むサイドバーがあります。

場合によっては div 1 または div 2 が欠落し、div 3 が引き上げられるため、div 3 は常にすべてのページの同じ場所に配置する必要があります。

position: relative to the sidebar と position: absolute を div 3 に追加してみました。

ここで何が欠けていますか？

混乱した人のためのレイアウト: 

 <div id='sidebar'>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>
 </div>
4

2 に答える 2

1

これが絶対配置の仕組みです。絶対配置された要素はコンテンツ フローから削除され、スペースを占有しないため、要素を押し下げることはできません。

ある種のプレースホルダーを使用するか、マージンを使用して何かを考え出す必要があります。要素をどのように配置する必要があるかはわかりませんが、div3常に上から配置する必要がある場合は400px、次のようにしてみませんか。

<div id='sidebar'>
    <div style="height:400px">
        <div id='div1'></div>
        <div id='div2'></div>
    </div>
    <div id='div3'></div>
    <div id='div4'></div>
</div>

このようにして、絶対配置をまったく使用する必要なく、自由に非表示div1にすることができます。div2

于 2012-06-21T13:53:23.363 に答える
1

可視性スタイリングを使用して #div1,2,4 を非表示にしようとしましたが、他の div は移動しませんでした

ここを見てください：http://jsfiddle.net/hq6LM/10/

この理由は、可視性を使用してスタイルを設定すると、ブロックのプロパティが保持され、div が上に移動されないためです。

お役に立てれば。

于 2012-06-21T13:58:04.243 に答える