固定トップナビゲーションバーボタン

Question

これは非常に基本的な質問です。私はまず、そのすぐ下に2つのボタンがあるデフォルトのナビゲーションバーを持っていました。私はnavbarを固定されたトップのnavbarに変更しました、そして今、ボタンはその背後にあります。ボタンのブレークを指定するにはどうすればいいですか？ブレークを使わずにボタンの位置を指定するより良い方法があれば（私はそこにあると確信しています）、それは何ですか？

Answer 1

位置を固定したときに、ページの流れから取り除きました。ボタンの場合は、スペースを取るために上の余白を使用することをお勧めします。あなたは特定のサイズと名前で再生することができますが、このようなものです。また、ボタンを保持するコンテナにclass="topRow"を追加します。

.topRow{ 
    margin-top:25px; 
} 

Answer 2

最も簡単な解決策は、relativepositionをボタンに追加し、topから固定ナビゲーションバーの高さに加えて（さらに余分なパディング用のピクセル数）までの距離を設定することです。

Answer 3

ナビゲーションバーの下にあるスペーサーを追加できます。スペーサーとナビゲーションバーの高さを同じCSSで定義すると、1か所に高さを指定するだけで済むという利点があります。スペーサーの後、他のものはすべて、ナビゲーションバーの下部がページの上部にあるように配置されます。

.navbar{ 
 
    position:fixed; 
 
    width: 100%; 
 
    background:grey; 
 
} 
 

 
.spacer, .navbar{ 
 
    height: 50px; 
 
}

<nav class=navbar>Hey I'm the navbar</nav> 
 
<div class=spacer>I'm hidden under the nav bar</div> 
 
<button class=button>button 1</button> 
 
<button class=button>button 2</button>