同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明

CSS を使用して上部の固定効果を実現したいと思います。

margin-top と position:fixed を実装してみます。コードは次のようになります。

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="utf-8">
  <meta name="ビューポート" content="width=デバイス幅">
  <title>テスト</title>
  <スタイル タイプ="text/css">
      .ヘッダー{
          位置: 固定;
          高さ: 20px;
          幅: 100%;
      }
      。コンテンツ {
          上マージン: 30px;
      }
      .aside {
          フロート: 左;
          幅: 200ピクセル;
          背景: オレンジ;
      }
      。主要 {
          オーバーフロー:自動;
          背景: 黄色;
      }
  </スタイル>
</head>
<本文>
    <div class="header">123</div>
    <div class="content">
        <div class="aside">脇に</div>
        <div class="main">メイン</div>
    </div>
</本文>
</html>

その結果、ヘッダーは上部に配置されず、コンテンツの上部の margin-top 距離が空けられます。

position:fixed の定義によれば、ヘッダーはドキュメントフローから分離されており、コンテンツレイアウトの影響を受けないはずですが、実際はそうではありません。

問題の探索

1. コンテンツの margin-top を padding-top に変更します。期待した効果が得られます。
2. コンテンツは margin-top と padding-top を同時に設定します。margin-top のスペースはそのまま残ります。
3. body に padding-top を設定します。これにより、body の padding-top にスペースが確保され、期待される効果が得られます。
4. body に margin-top を設定すると、max(body->margin-top,content->margin-top) の距離が確保されます。
5. ヘッダーの上部をtop: 0;のように設定します。本文やコンテンツのレイアウトには影響されません。

未定: 詳細なテストコードと効果図は後ほど追加します(￣∇￣)...

要約する

すべては margin-top の縮小が position:fixed に与える影響に帰着します。まず、position:fixed要素の場合、topが指定されていない場合、垂直方向の参照原点はbodyボックスモデルのコンテンツの上端になります。 top が指定されている場合、垂直方向の参照原点は、ビューポートの上部境界と呼ばれるものであり、左方向と水平方向にも同様に適用されます。ここでの参照原点とは、固定要素を配置する際の参照対象を指します。一度決定すると、ページが下に引っ張られて body の上端が上に移動しても、固定要素の位置は変化しません。第二に、margin-top の崩壊問題により、コンテンツの margin-top を設定した後、コンテンツ本体の部分が下に移動します。つまり、原点を基準にして下に移動します。そのため、固定要素は margin-top 用のスペースを残します。

したがって、この問題は次の 2 つの側面から解決できます。

1. 参照原点をビューポートに変更します。固定要素の上部を設定します。

2. margin-top の崩壊問題を解決します。その他の方法については、以下のリンクを参照してください。

1) padding-top を body に設定します。
2) 本文の境界線を設定します。境界線の色は背景色と同じにする必要があります。
3) body に position:fixed を設定すると、body のスクロールバーが消えます。

とりあえず我慢して〜この時期忙しくなったら完璧にします（悲顔）（悲顔）。。。
未定: コンテンツ名とボックスモデルコンテンツが変更されているため、変更する必要があります...