CSS の位置属性を明確に理解するには、まず CSS ボックス モデルを詳細に理解する必要があります
ドキュメント内のすべての要素は長方形のボックスとして表示されます、サイズ (幅、高さ)、位置 (左、上、右、下)、属性 (色、背景、境界線など) などを決定します。このボックス モデルは、要素のコンテンツが占めるスペースを記述します。ボックスには、マージン エッジ、ボーダー エッジ、パディング エッジ、およびコンテンツ エッジの 4 つの境界線があります。以下に示すように (w3school からの画像):
配置モードは、ボックスがレイアウト全体のどこに配置されるべきか、またそれが周囲のボックスにどのような影響を与えるかを指定します。配置モードには、通常のドキュメント フロー、フローティング、および位置配置が含まれます。 この記事では主に位置の位置決めについて研究します
css の位置属性は 5 つの値を取ることができます:
static は、position のデフォルトの属性値です。position:static を適用する要素は、通常のドキュメント フロー内にあります。その位置と周囲の要素への影響は、ボックス モデルによって決定されます。
static Positioned 要素は、宣言されたすべての要素を無視します。上、右、下、左、および z-index プロパティの値。これらの属性値を使用する場合は、その位置属性に絶対値、相対値、固定値のいずれかを適用する必要があります。
絶対配置の要素は、通常のドキュメント フローから完全に分離され、その周囲の要素については、表示属性が設定されているかのように、絶対配置の要素が存在しないものとして扱われます。なし。絶対位置の要素は、top、right、left、bottom の 4 つの属性によって設定できます。デフォルト値は auto です。
絶対位置決めの重要なポイントは、その開始点がどこにあるのかということです。たとえば、top: 20px と設定した場合、20px はどこから計算されるでしょうか。
絶対配置要素の開始位置は、位置値が静的ではない最初の親要素を基準にしています。例:
コードを見ると理解しやすいです:
CodePen の guihailiuli (@guihailiuli) による Pen css-position-absolute を参照してください。
CodePen の guihailiuli (@guihailiuli) による Pen css-position-relative を参照してください。ページ内の静的。この場合、相対的に配置された要素のデフォルトの位置はその要素自体によって占められており、他の要素は相対的に配置された要素の元の位置を占めません。相対的に配置された要素の変位は相対的なものであることが理解できます。要素自体のエッジ。
実際、相対的に配置された要素は、「上」と「下」の両方の変位属性値を設定します。実際、「上」の方が「下」よりも優先されます。ただし、相対的に配置された要素には「左」と「右」の両方の変位属性が設定されており、それらの優先順位はページの言語によって異なります。たとえば、ページが英語のページの場合は、「左」の変位属性が使用されます。ページがアラビア語の場合、「right」のディスプレイスメント属性が優先されます。
固定位置は絶対位置と似ていますが、その位置はブラウザ ウィンドウに対して相対的です。スクロールバーに従わないでスクロールします。つまり、ユーザーがページ上のどこにいても、固定位置要素は常にページ上の 1 つの場所に留まります。 「position」属性値のうち、「fixed」属性値のみが IE6 ブラウザーでは実行できません。
CodePen の guihailiuli (@guihailiuli) による Pen css-position-fixed を参照してください。
最も一般的なタイプの固定位置設定です。目的は、ページの固定ヘッダー、フッター、またはサイドを作成することです。CodePen の guihailiuli (@guihailiuli) による Pen css-position-fixed-footer を参照してください。