相対位置と絶対位置の違いは？質問する

Question

絶対的な CSS 配置

position: absolute;

絶対配置は最も理解しやすいです。まずは CSSpositionプロパティから始めます。

position: absolute;

これは、ブラウザに、配置する要素が文書の通常の流れから外され、ページ上の正確な位置に配置されるべきであると伝えます。HTML内でその要素の前後の要素がWebページ上でどのように配置されるかには影響しませんが、意思上書きしない限り、親の位置付けに従います。

要素をドキュメントウィンドウの上部から 10 ピクセルの位置に配置する場合は、配置時にそのtopオフセットを使用します。positionabsolute

position: absolute;
top: 10px;

この要素は、どのようなコンテンツが要素を通過、下、または上を通過するかに関係なく (視覚的に)、常に10pxページの上から表示されます。

4 つの位置決めプロパティは次のとおりです。

top
right
bottom
left

これらを使用するには、オフセットプロパティとして考える必要があります。つまり、配置された要素はright: 2px右に移動されません2px。その右側は、ウィンドウの右側 (またはその位置をオーバーライドする親) からだけオフセットされます2px。他の 3 つについても同様です。

相対的な位置

position: relative;

相対配置は、配置と同じ4つの配置プロパティを使用しますabsolute。ただし、要素の位置をブラウザのビューポートに基づいて決定するのではなく、要素が通常の位置にある場合の位置から開始します。流れ。

たとえば、Web ページに 3 つの段落があり、3 番目の段落position: relativeにスタイルが適用されている場合、その位置はビューポートの元の側面からではなく、現在の場所に基づいてオフセットされます。

段落1。

段落2。

段落3。

3em 上記の例では、3 番目の段落はコンテナ要素の左側に配置されますが、最初の 2 つの段落よりも下になります。これはドキュメントの通常の流れに残り、わずかにオフセットされるだけです。これをに変更すると position: absolute; 、ドキュメントの通常の流れになくなるため、その後に続くものはすべてその上に表示されます。

ノート：

絶対配置された要素のデフォルトはwidth、その中のコンテンツの幅です。一方、相対配置された要素のデフォルトは、その要素が埋めることができるスペースの幅widthです。100%
絶対配置された要素と重なり合う要素を持つことはできますが、相対配置された要素では（ネイティブ、つまり負のマージン/配置を使用しない場合）重なり合う要素を持つことはできません。

抽選対象:このリソース

Answer 1