CSS位置の詳細説明：絶対、相対_Experience交換

CSS2.0 ハンドブックの説明:

このプロパティ値を絶対値に設定すると、オブジェクトが通常のドキュメント フローの外にドラッグされ、周囲のコンテンツのレイアウトに関係なく、オブジェクトが絶対的に配置されます。異なる Z インデックス プロパティを持つ他のオブジェクトがすでに特定の位置を占めている場合、それらは互いに影響を与えず、同じ位置で重なり合います。この時点では、オブジェクトには外側のパッチ (マージン) はありませんが、内側のパッチ (パディング) とボーダー (境界線) は存在します。
オブジェクトの絶対位置をアクティブにするには、左、右、上、下プロパティの少なくとも 1 つを指定し、このプロパティの値を絶対に設定する必要があります。それ以外の場合、上記のプロパティはデフォルト値の auto を使用し、オブジェクトは通常の HTML レイアウト規則に従い、前のオブジェクトの直後にレンダリングされます。

TRBL 属性 (TOP、RIGHT、BOTTOM、LEFT) は、position 属性が設定されている場合にのみ有効です。
position:absolute が設定されている場合
親 (無限) が位置属性を設定していない場合は、現在の絶対値が TRBL 属性と結合されて、ブラウザの左上隅が元の点として配置されます。
> 親 (無限) ) に位置属性を設定する場合、TRBL 属性と組み合わせて、親 (最も近い) の左上隅を元の点として使用して、現在の絶対位置が配置されます。

位置: 相対
が設定されている場合、親 (最も近い) コンテンツ領域の左上隅が元の点として参照され、位置決めのために TRBL 属性と結合されます (または、位置決めされた要素に対して相対的です)。親コンテンツ領域 (前の要素はオフセットされます)、親がない場合は、BODY の左上隅が元の点として使用されます。相対位置決めは積み重ねることができません。相対配置を使用する場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、他のボックスが覆われてしまいます。

一般的に、Web ページが中央にある場合に Absolute を使用すると間違いが起こりやすくなります。これは、Web ページは常に解像度のサイズに自動的に適応しますが、Absolute はブラウザの左上隅を使用するためです。解像度の変化に合わせて位置を変更してください。場合によっては、コンテナーの上下関係を設定するために z-index に依存する必要があります。値が大きいほど、上部が高くなります。値の範囲は自然数です。もちろん、注意すべき点は、z-index を使用して親子関係を上下に設定することはできないということであり、子が上に、親が下になければなりません。

このプロパティ値を相対に設定すると、オブジェクトは通常の HTML フロー内に保持されますが、その位置は前のオブジェクトに基づいてオフセットされる可能性があります。相対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトの自然なスペースを上書きすることなく、独自のスペースを占有します。対照的に、絶対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトが通常のドキュメント フローからドラッグされるまで、その自然なスペースを占めます。絶対に配置されたオブジェクトを表示領域の外側に配置すると、スクロール バーが表示されます。ただし、相対的に配置されたオブジェクトが表示領域外に配置されている場合、スクロール バーは表示されません。実際、ポジショニングに関する主な問題は、それぞれのポジショニングの意味を覚えておくことです。相対配置は、ドキュメント フロー内の要素の初期位置を「相対」しますが、絶対配置は、すでに配置されている最も近い祖先要素を「相対」とします。

以下補足です。

CSSの絶対配置(absolute)と相対配置(relative)は知っていますが、該当するものを書いたことはありません。私自身. 効果！
長い間作業して、ようやく完成しました！この 2 つの属性についても少し理解できました。

概要は次のとおりです。

まず次のレイヤー構造を見てください。

このレイヤーは位置: 相対; スタイルのみを適用します

このレイヤーは位置: 絶対; スタイルのみを適用します

スタイルを適用しない

1. 絶対: スペースを占有しません、相対: スペースを占有します Bit!

上部構造の例:

ID rel のレイヤーは表示時に 1 行を占めます。その後ろのabsレイヤーは次の行にのみ表示されます。
idがabsのレイヤーを表示すると、idがsssのレイヤーと重なってしまいます！

2. デフォルト (位置決めは top と組み合わせられないなど) では、絶対的な位置決めは親レイヤーに基づきます
たとえば、上の abs の ID を持つレイヤーが top と配置されていない場合、 , などの場合、その表示位置は親の posi レイヤーに従います (posi はドキュメントの左下隅にあり、また左下隅にもなります)

3. 上、下、を組み合わせる場合right、left およびその他の属性、絶対位置指定) は位置決めとしてウィンドウを使用し、相対位置指定ではオフセットのベースラインとして独自の占有を使用します。次のように:

スタイル

このレイヤーは、position:relative;bottom:30px;style を適用します

このレイヤーは、position:absolute;bottom:30px;style のみを適用します

div>



上記のコード:
ID rel のレイヤーが上に移動し、レイヤー ID sss と重なります
レイヤー ID は abs上に移動します ウィンドウがベースラインなので、ウィンドウから 30 ピクセル離れた位置に移動します。

4. 上、下、右、左、その他の属性を組み合わせるときに、絶対配置で親レイヤーを位置決めのベースラインとして使用する場合は、親レイヤーに絶対属性または相対属性を適用できます。

このレイヤーは、position:relative;bottom を適用します。 ：30px; style

このレイヤーは、position:Absolute;bottom:30px; style

のみを適用します。

上記のコード: ID posi のレイヤーは絶対属性も使用できます。
ID が rel であるレイヤーは影響を受けず、独自のプレースホルダーをベースラインとして使用してオフセットされます。

abs の ID を持つレイヤーは、その ID を持つ posi レイヤーの下端を位置決めのベースラインとして使用します。このとき、posi レイヤーの高さが 30px 未満の場合、abs レイヤーは配置されない可能性があります。見える！