CSS のposition_html/css_WEB-ITnose についての簡単な説明

position とは何ですか? CSS 2.1 の説明によると、position と float の値は、ブラウザーが要素ボックスの特定の位置を計算するために使用する位置決めアルゴリズムを決定します。この記事では主に、position 属性のさまざまな値を紹介し、相対配置 (relative) と絶対配置 (absolute) の簡単な比較を行います。

5 つの異なる値

inherit 名前が示すように、要素のposition 属性値は、その要素の親要素から継承されます。つまり、親要素と同じです。

静的位置プロパティのデフォルト値。 Position:static が適用される要素は、ドキュメント フロー内の位置、つまり元の HTML ドキュメントの構造と要素が表示される場所に基づいて表示されます。 left、right、top、bottom 属性で設定された値は効果がありません。

固定固定位置。つまり、要素の表示位置を指定すると、画面がスクロールされても、要素は常に画面上のその位置に表示されます。 。

relative 相対位置決め、以下で詳しく説明します。

absolute 絶対位置決め、以下で詳しく説明します。

相対配置

相対配置では、ドキュメント フロー内の要素の初期位置に指定されたオフセットを加えたものに基づいて、要素の最終的な表示位置が計算されます。相対配置を採用する要素は、他の隣接するボックスの表示効果には影響しません。つまり、要素 B が相対配置を採用する場合でも、ドキュメント フロー内の要素 B の後ろの要素は、要素 B の初期位置に基づいて最終的な表示位置を計算します。要素 B と同様に、元の位置を占めており、移動していません。次の図に示すように、2 列目と 3 行目の要素に相対位置を適用した後、2 列目と 4 行目の要素は下に移動していません。

絶対配置

絶対配置を使用する要素の位置は、左、右、上、下、および要素を含むブロックで指定されたオフセットによって決定されます。包含ブロックとは何ですか? 絶対配置のコンテキストでは、絶対配置を使用する要素の場合、その包含ブロックは、絶対/相対/固定配置を使用する最も近い親要素によって決定されます。具体的なルールについては、CSS 仕様を参照してください。絶対に配置された要素はドキュメント フローから外れます。次の図に示すように、ドキュメント フローの 3 行目の要素に絶対配置が適用され、4 行目の要素が上に移動して 3 行目の要素の元の位置を占めます。要素の 3 行目は左上隅に表示されます。

相対配置 VS 絶対配置

上記の分析からわかるように、相対配置でも絶対配置でも、要素は left、right、top、bottom の 4 つの属性で設定されたオフセットに基づいて配置されます。違いは、計算の基準開始点にあります。相対配置では、ドキュメント フロー内の要素の元の位置に基づいて最終的な表示位置が計算され、絶対配置では、要素を含むブロックの位置に基づいて最終的な表示位置が計算されます。