css_html/css_WEB-ITnoseのposition属性を理解する

ディレクトリ

ボックス モデルと配置タイプ

CSS の位​​置属性を明確に理解するには、まず CSS ボックス モデルを詳細に理解する必要があります

ドキュメント内のすべての要素は長方形のボックスとして表示されます、サイズ (幅、高さ)、位置 (左、上、右、下)、属性 (色、背景、境界線など) などを決定します。このボックス モデルは、要素のコンテンツが占めるスペースを記述します。ボックスには、マージン エッジ、ボーダー エッジ、パディング エッジ、およびコンテンツ エッジの 4 つの境界線があります。以下に示すように (w3school からの画像):

配置モードは、ボックスがレイアウト全体のどこに配置されるべきか、またそれが周囲のボックスにどのような影響を与えるかを指定します。配置モードには、通常のドキュメント フロー、フローティング、および位置配置が含まれます。 この記事では主に位置の位置決めについて研究します

css の位置属性は 5 つの値を取ることができます:

• position: static
• position:relative
• position:Absolute
• position:fixed
• position:inherit

static Positioning (static) )

static は、position のデフォルトの属性値です。position:static を適用する要素は、通常のドキュメント フロー内にあります。その位置と周囲の要素への影響は、ボックス モデルによって決定されます。

static Positioned 要素は、宣言されたすべての要素を無視します。上、右、下、左、および z-index プロパティの値。これらの属性値を使用する場合は、その位置属性に絶対値、相対値、固定値のいずれかを適用する必要があります。

絶対配置 (絶対)

絶対配置の要素は、通常のドキュメント フローから完全に分離され、その周囲の要素については、表示属性が設定されているかのように、絶対配置の要素が存在しないものとして扱われます。なし。絶対位置の要素は、top、right、left、bottom の 4 つの属性によって設定できます。デフォルト値は auto です。

絶対位置決めの重要なポイントは、その開始点がどこにあるのかということです。たとえば、top: 20px と設定した場合、20px はどこから計算されるでしょうか。

絶対配置要素の開始位置は、位置値が静的ではない最初の親要素を基準にしています。例:

1. 要素のスタイルをposition:absoluteに設定した場合
2. Ifこの要素の親要素が静的ではない (ただし、相対、絶対、固定、継承) 場合、絶対配置要素の開始点は親要素の左上隅になります
3. この要素の親要素がデフォルトの場合値 (静的) を指定してから、親要素の親要素に非静的配置があるかどうかを確認します。要素に (相対、絶対、固定、継承) 配置が適用されている場合は、その左上隅が絶対要素の開始位置になります。 。
4. そうでない場合は、非静的に配置された要素が見つかるまで、または検索が失敗して最も外側のブラウザ ウィンドウに到達するまで、DOM を上方向にトラバースします。この時点で、絶対配置された要素はドキュメント ウィンドウを基準にして配置されます。

コードを見ると理解しやすいです:

CodePen の guihailiuli (@guihailiuli) による Pen css-position-absolute を参照してください。

相対位置決め (相対)

要素が相対的に配置される場合は、 left、bottom、left の 4 つの属性により、要素をデフォルトの位置から移動できます。たとえば、top が相対的に配置された要素に「20px」の値を設定すると、要素は元の位置から下に「20px」移動します。逆に、「top」を「-20px」に設定すると、要素は元の位置から「20px」上に移動します。 left を 30 ピクセルに設定すると、要素の左側に 30 ピクセルのスペースが作成され、要素が右に移動します。要素は異なる方向と距離で移動するため、重なり合う可能性があります。以下の効果を参照してください。

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 を参照してください。