位置決め属性の詳細説明 location: 相対および絶対

位置タグ: position

には 属性が含まれます : 相対 (相対)

要素が相対的に配置されている場合、最初にその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対配置の場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有し続けます。したがって、要素を移動すると、他のボックスを覆うことになります)

相対配置: 相対配置は、通常のドキュメントから切り離されません。フローに基づいて要素がその位置に相対的に設定されている場合、元のプレースホルダー情報はまだ存在します

2.position:absolute; は

絶対位置

を意味し、位置は、ブラウザ。 絶対配置では、要素がドキュメント フローから取り出されるため、スペースを占有しません。通常のドキュメント フロー内の要素は、絶対に配置された要素が存在しないかのようにレイアウトされます。 (絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素をカバーでき、その階層順序は z-index を介して制御できます。z-index が高いほど、より上位に表示されます。) 絶対配置: ablution はドキュメント フローおよび

フローティング

モデルから分離され、プレースホルダーなしで他のオブジェクトから独立して存在します。 3. 親コンテナが相対配置を使用し、子要素が絶対配置を使用すると、子要素の位置はブラウザの左上隅を基準とするのではなく、親ウィンドウの左上隅を基準とするようになります

以下の具体的なケースの説明:

1. c が b にネストされており、b と c の両方が相対的に配置されている場合、c の相対的な配置は b に対して相対的であり、b はプレースホルダー情報を保持し、b は c のプレースホルダー情報を保持します。

2. c が b にネストされ、b が絶対的に配置され、c が相対的に配置される場合、b は浮動小数点の範囲外でプレースホルダー情報を持ちませんが、c は b に対して相対的に配置され、プレースホルダーは b に発生します。

3. a、b、c、d が並列され、グループの ID を持つ div にすべてネストされている場合: :20ピクセル; top:20px;}

このメソッドでは、親要素は相対的に配置されていますが、leftとtopの値は設定されておらず、浮動オブジェクトとみなすことができ、bは絶対的に配置されているので、スペースは占有しませんが、親要素は相対的に配置されるため、ここでの絶対配置は、ブラウザを基準としたものではなく、親要素を基準とした絶対配置になります。

例:

<div id="main">
<div id="a">aaaaaaaaaa</div>
<div id="b">bbbbbbbb</div>
</div>

(1) Position:Absolute が a に設定されている場合、a は通常のドキュメント フローから切り離され、a は位置を占めなくなります。つまり、b は a に基づいなくなりますが、親から直接配置されます。 (b の位置は a なしの場合と同じです)。
position:relative が a に設定されている場合 (ドキュメント フローから離脱することなく)、a は元の位置を基準にして位置を占め、メイン上で浮いているように見えます。の影響を受けず、元の配置で進行します。 (bの位置はaにposition属性がない場合と同じです)
(2) mainにposition:relative/absoluteを設定した場合、内部のaまたはbの絶対位置または相対位置は親要素mainに対して相対的になります。 、その後、相対または絶対方法に従って配置します

注: 親要素が有効な幅と高さの値を設定していない場合、 b はグループ内の最後の要素の右上隅を基準にして絶対的に配置されます。幅と高さを設定する必要があります! ！ ！ ！ ！ ！

以上が位置決め属性の詳細説明 location: 相対および絶対の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。