ポジションの使用

Question

現在、私はHTMLを使用していて、ポジションを使用してdivコンテンツを整列しています。

現時点では、3つのdivがあります。 position：fixedを使用し、もう一方をposition：relativeを使用して2 divs。

私の2つの固定divは、ページの幅を100％とし、ウェブページの上部に揃えてあります。トップバーのように。

私の3番目のdivは、位置：相対のトップバーの下に配置されます。

.topbar-container { 
position:fixed; 
width:100%; 
height:72px; 
background-color:#ffffff; 
border-bottom:1px solid #e0e0e0; 
z-index:2; 
top:0; 
} 

.topbar { 
position:fixed; 
width:1200px; 
height:72px; 
left:50%; 
margin-left:-600px; 
top:0; 
} 

.body-container { 
position:relative; 
width:80%; 
height:200px; 
margin:0 auto; 
left:50%; 
margin-left:-600px; 
max-width:1200px; 
border:1px solid red; 
} 

私のHTML：：

<div class="topbar-container"> 
     <div class="topbar"> 

     </div> 
    </div> 

    <div class="body-container"> 
    </div> 

私がいる問題第三のdivは、2つの固定のdivの下に配置されていないことである（写真参照）

ここでは私のコードですあなたが画像で分かるように、赤い枠線を持つdivは、ページの上部まで押し上げられています。ここで、position：relativeを使用して考えると問題が解決されました。

誰かが私を探してもらえますか？事前に

おかげposition: fixedまたはposition: absoluteを設定

http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png

Answer 1

は、ページフローから要素を削除します。あなたは今、明示的にそれが.topbar-containerの下に表示させるために.body-containerためtopプロパティを設定する必要があります。

.body-container { 
position:relative; 
width:80%; 
height:200px; 
margin:0 auto; 
left:50%; 
margin-left:-600px; 
max-width:1200px; 
border:1px solid red; 
top: 72px; /* must be >= the height of .topbar-container */ 
}