css - ヘッダー要素を配置する最良の方法は?

Question

内部にロゴ、メニュー、検索オプションがあるdivヘッダーがあります。position:fixedロゴは左側に、メニューは中央に、検索は右側に配置されます。ロゴとメニューには相対位置があり、検索にはposition:absolute.

さて、ここで問題です。ブラウザウィンドウのサイズを変更すると、検索 div がブラウザウィンドウの右上隅から一定の距離にとどまり、さらにサイズを変更すると、メニュー div と重なって押し下げられます。

何が問題なのかわかりませんが、次のようにしたいと思います: ヘッダーを一番上にしたいのですが、ウィンドウのサイズを変更するときに検索とメニューを移動させたくありません。ウィンドウがそれらの上でサイズ変更された場合、それらは表示されません。

では、これを行う最善の方法は何ですか? ヘッダー div を固定したままにして、他の div を絶対位置、相対位置、または 3 分の 1 に配置しますか?

score 3 · Accepted Answer

固定のように振る舞うのではなく、絶対的なように振る舞う。 fixedサイズ変更ではなく、ウィンドウのスクロールを扱います。あなたのcssは次のとおりです。

#tr_corner {
    position:absolute;
    top:10px;    
    right:20px;    
}

と言うとright: 20px、最も近い位置にある祖先の右端から 20px 離れた位置に要素を設定します。これは、ウィンドウのサイズが変更されても維持されます。ウィンドウのサイズが変更されたときにウィンドウを動かしたくない場合は、おそらく右ではなく左側から配置できます。

2 に答える 2