CSS の絶対位置と相対位置_html/css_WEB-ITnose

1.static、相対、絶対、固定の意味

static: 要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの

の一部として長方形のボックスを生成しますが、インライン要素は親要素内に 1 つ以上のライン ボックスを生成します。

relative: 要素ボックスは特定の距離だけオフセットされます。要素は配置されていない形状を保持し、要素が元々占有していたスペースも保持されます。

absolute: 要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロック (最初の要素を含むブロックであるドキュメント内の別の要素である可能性があります) に対して相対的に配置されます。

通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。

通常のフローで最初に生成されたボックスのタイプに関係なく、要素を配置した後にブロックレベルのボックスを生成します。

修正: 要素ボックスは絶対ボックスのように動作しますが、そのボックスを含むブロックはウィンドウ自体です。

2. 包含ブロック (配置する要素のコンテキストを定義することに似ており、配置の最優先事項です)

(1) ルート要素の包含ブロックは、HTML ではユーザー エージェントによって作成されます。次の要素は html 要素ですが、一部のブラウザでは body がルート要素として使用されます。

ほとんどのブラウザでは、最初に含まれるブロックはビューポートのサイズの長方形です。

(2) 非ルート要素の場合、その位置値が相対的または静的である場合、包含ブロックは、最も近いブロック レベルのボックス、テーブル セル、またはインライン ブロックの祖先ボックスのコンテンツ境界で構成されます。

(または含まれるブロック自体がそのコンテキストです)

(3) 非ルート要素の場合、その位置値が絶対値である場合、含まれるブロックは、位置値が絶対値ではない最も近い祖先要素に設定されます。 static (兄弟要素ではありません)。

3. オフセット属性: 上、右、下、左 (包含ブロックを基準としたオフセット)

位置決めされた要素は、位置が静的ではない要素です。

(1) offset 属性は要素のサイズを定義します

要素のサイズが重要な場合もありますが、要素の配置には必ずしも必要ではありません。

以下の例では、配置された要素には指定されたサイズがありませんが、その効果はサイズがあることを示しています。

これらの寸法はこれらのオフセットから暗黙的に計算されるためです。

<div style="  background-color: darkgrey;width: 200px; position: absolute; height: 100px">    <div style="right: 100px;background-color: red;height: 100px;bottom: 0;left: 0;position: absolute;top: 0;"></div></div>

上記によると、位置決めされた要素は絶対的に位置決めされ、その要素を含むブロックは位置が静的ではない最も近い要素であり、この場合は灰色のブロック要素です。

(2) コンテンツのオーバーフローとクリッピング

オーバーフローでは、overflow 属性が使用されますが、ここでは説明しません。

トリミングにはクリップを使用しますが、これはこの章の焦点では​​ありません。

4. 絶対配置

<div style="height: 100px;width: 200px;background-color: #00ee00;top:10px;position: absolute">绿</div><div style="  background-color: darkgrey;width: 300px; position: relative; height: 100px">灰    <div style="background-color: red;width: 200px;height: 100px;top:10px;right: 100px;position: absolute">红</div></div>

上の例は、包含ブロックと配置された要素の関係を示しています。

①は絶対位置決め要素です。 top=10px; ページのルート要素を基準にします。

②は包含ブロックであり、その中には③絶対位置要素が含まれています。

③は絶対位置決め要素です。 top=10px; ②を含むブロックを基準にします。

場合によっては、ユーザー エージェントに選択させるのではなく、body 要素がそのすべての子孫に対して包含ブロックを作成するようにしたい場合があります。

ステートメント: body{position:relative}

5. 相対配置

(1) 相対的に配置された要素は、下の図の狭い空白領域など、元のスペースを占有します。

と相対的に配置された要素は、それ自体を含むブロックを設定し、そのコンテキストに対して相対的にそれ自体をオフセットします。

下の図で、赤いボックスは元のドキュメント レイアウトの場所です。 top:10px; を設定すると、自身の位置に対して 10 ピクセル下に移動します。

<div style="height: 100px;width: 200px;background-color: #00ee00;top:10px;bottom:20px;"></div><div style="height: 100px;width: 200px;background-color: gold;top:10px;bottom:20px;position: relative"></div>

(2) 相対位置の過度の制限の影響。

css2.1 では、相対位置が過度に制限されている場合、値が 2 つの値の逆の数にリセットされることが指摘されています。ここでは Bo Pain =-top

つまり、top:10px;bottom:-10px;

結果は次のとおりです: div 要素は 10 ピクセル下に移動します。

<div style="height: 100px;width: 200px;background-color: #00ee00;top:10px;bottom:20px;position: relative"></div>

6. 個人的には、この 2 つの間には本質的な違いがあると思います

上、右、下、左は、それを含むブロックに対する要素のオフセット属性です。

margin-top.. およびその他の属性は、要素内のボックス モデルのマージン属性です。

どちらも要素間の位置関係を引き起こす可能性があるようです。

(学ぶこと、改善することがまだたくさんあります)