コンテンツは固定トップのナビゲーションバーの下に配置されます

Question

私はReactでInstagramクローンを作成していますが、今はタイトルバーの設定に問題があります。 position: fixed;に設定すると、水平に上に座るようになりましたが、今度は自分の写真ギャラリーがタイトルバーの上に重なって表示されます。私はpadding-topをbodyと.gallery（別々）の両方に追加しようとしましたが、設定しただけですべてが下に移動します（重複しています）。また、.space divにmargin-bottomを追加することも同じです。私の写真ギャラリーが私のタイトルバーの下に座って欲しいです。私のapp.jsは、タグの中のそれ自身の<div>にReactDOM.render()で接続されています。ここに私のJSXです：

app.js

return (
    <main> 
    <div className="bar"> 
     <div> 
     <h1 className="title">boy walks dog</h1> 
     </div> 
    </div> 

    <div className="gallery"> 
     {mappedImageCollection} 
    </div> 

    <div> 
     {overlay} 
    </div> 
    </main> 
) 

そして、ここでは私のCSSです：

body { 
    margin: 0px; 
    padding: 0px; 
    background-image: url('../img/pattern7.png'); 
    } 

    .gallery { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-items: center; 
    max-width: 80%; 
    margin: auto; 
    } 

    .bar { 
    position: fixed; 
    background-color: #C26464; 
    width: 100%; 
    box-shadow: 0px 0px 5px 0px; 
    } 

Answer 1

ただ、ナビゲーションバーにあなたがそれを間隔をあけることにしたいどのくらいの下マージンを与えますアウト

または

お試しください

スペーサーdiv要素が働いて、あなたのCSSの2つの要素

<div class="spacer"> 
</div> 

わたってるしきあなたのhtmlに

.spacer{ 
    display: block; 
    height: //how much space you want between the two elements 
    content: ''; 
}