div私は、次のコードを使用して、常に画面の上部に固定されるように修正しようとしています。
position: fixed;
top: 0px;
right: 0px;
しかし、 はdiv中央揃えのコンテナー内にあります。position:fixedこれを使用すると、 はブラウザーの右側に配置されるなど、ブラウザー ウィンドウを基準にして固定さdivれます。代わりに、コンテナーを基準にして固定する必要があります。
position:absoluteを使用して を基準にして要素を固定できることはわかっていますdivが、ページを下にスクロールすると要素が消えて のように上部に固定されなくなりますposition:fixed。
これを実現するためのハックや回避策はありますか?
ベストアンサー1
短い答え:
いいえ。
(CSS 変換で可能になりました。以下の編集を参照してください)
長い答え: 「固定」配置を使用する際の問題は、要素がフローから外れてしまうことです。そのため、要素は親を持たないかのようになり、親を基準に再配置できなくなります。ただし、コンテナーの幅が固定で既知の場合は、次のようなものを使用できます。
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
編集 (2015/03):
これは古い情報です。CSS3 の transform の魔法の力を借りて、動的なサイズ (水平方向と垂直方向) のコンテンツを中央に配置することが可能になりました。同じ原理が適用されますが、コンテナをオフセットするために margin を使用する代わりに を使用できますtranslateX(-50%)。これは、幅が固定されていない限りオフセットする量がわからないため、上記の margin トリックでは機能しません。また、相対値 ( など50%) は使用できません。これは、親に対して相対的であり、適用される要素に対してではないためです。transformは動作が異なります。その値は、適用される要素に対して相対的です。したがって、50%の場合はtransform要素の幅の半分を意味し、50%margin の場合は親の幅の半分を意味します。これはIE9+ソリューション
上記の例と同様のコードを使用して、完全に動的な幅と高さを使用して同じシナリオを再現しました。
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
中央に配置したい場合は、次のようにすることもできます。
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
デモ:
jsFiddle: 水平方向のみ中央揃え
jsFiddle: 水平方向と垂直方向の両方で中央揃え
オリジナルのクレジットはユーザーに帰属しますアーロンク6それを指摘してくれてこの答え