要素を上部と中央に固定する

Question

ビューポートから水平方向と垂直方向の両方でオーバーフローするページがあり、ナビゲーションが常に上部に配置され、水平方向の中央に配置されるようにナビゲーションを貼り付けたいと考えています。

これで、粘着トップは機能しますが、センタリングは機能しません。誰か助けてくれませんか？

＃＃＃体 { テキスト整列: 中央; } #ヘッダー { 背景色: 黄色; 幅: 最大コンテンツ; 位置: スティッキー; トップ: 0; 左: 50%。 翻訳: -50% } ＃容器 { 背景色: 黒; 色: 白; 幅: 200vw; 高さ: 200vh; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; コンテンツの配置: 中央; フレックス方向: 列; }

<div id="ヘッダー"> 私は常に先頭に立って中心にいなければなりません </div> <div id="コンテナ"> <スパン> 私は非常に大きくて幅が広いです </span> </div>

コードペン：https://codepen.io/hbchin/pen/bGjpQLJ

Answer 1

position:sticky や垂直配置とは異なり、left:50% は動的な配置オプションではなく、単に初期位置を設定するだけです。水平スクロールバーは依然として移動するため、「左端から 50%」の位置に留まります。

固定の左右の位置を実現するには、タイトルの周囲に position:fixed を含むタイトル コンテナを追加します。その中で、タイトル div は auto のマージンを取得できます:

＃＃＃体 { テキスト整列: 中央; 最大幅:100vw; オーバーフロー:スクロール; } /*追加した*/ #ヘッダコンテナ{ 位置:固定; 幅:100vw; 左:0; トップ:0; } #ヘッダー { 背景色: 黄色; 幅: 最大コンテンツ; /*左: 50%;*/ /*削除*/ margin:auto;/*追加*/ } ＃容器 { 背景色: 黒; 色: 白; 幅: 200vw; 高さ: 200vh; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; コンテンツの配置: 中央; フレックス方向: 列; }

 

    
    私は常に先頭に立って中心にいなければなりません
    



  

  私は非常に大きくて幅が広いです
  

Answer 2

いくつか調べた結果、次のことがわかりました:

CSS で位置固定を使用すると、要素が左側に固定されないのはなぜですか?

本体は非常に大きなボックスの幅に自動的に拡張されるため、基本的には貼り付きません。

これをインライン ブロック コンテナー内に配置すると、幅が子に自動的に拡張されなくなり、貼り付け動作が可能になります。

これはうまくいきます:

＃＃＃体 { テキスト整列: 中央; } #ヘッダー { 背景色: 黄色; 幅: 最大コンテンツ; 位置: スティッキー; トップ: 0; 左: 50%。 翻訳: -50% } ＃容器 { 背景色: 黒; 色: 白; 幅: 200vw; 高さ: 200vh; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; コンテンツの配置: 中央; フレックス方向: 列; } ＃全部 { 表示: インラインブロック; }

    

        私は常に先頭に立って中心にいなければなりません
    

    
        

            私は非常に大きくて幅が広いです