親要素で位置を設定する必要があるのはなぜですか?

親要素は位置を設定して、子要素の位置とレイアウトを制御します。値が異なれば用途も異なります: 1. static、通常のドキュメント フローに従って要素をレイアウトでき、他の配置属性の影響を受けません; 2.relative、子要素とコントロールをラップするために相対的に配置されたコンテナを作成します。レイアウト; 3. Absolute、子要素の正確な位置を制御するために使用される、絶対位置のコンテナを作成します; 4. Fix、ページ上に固定要素を作成するために使用される、固定位置のコンテナを作成します。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

親要素のposition属性を設定する目的は、子要素の位置とレイアウトを制御することです。 Position 属性は要素の配置方法を変更するために使用でき、一般的な値には静的、相対、絶対、固定が含まれます。

1. static:

static は、position 属性のデフォルト値です。要素は通常のドキュメント フローに従ってレイアウトされ、他の配置の影響を受けません。属性。親要素がposition属性を設定していない場合、子要素の位置も通常のドキュメントフローに従ってレイアウトされます。つまり、子要素はHTML内の順序に従って配置されます。

2.相対:

親要素が位置属性を相対に設定する場合、子要素の位置は、上、右、下を設定することで相対的に設定できます。および left 属性 親要素はオフセットされます。この配置方法では、ドキュメント フロー内の子要素の位置は変更されませんが、親要素に対して相対的にオフセットされます。

親要素にposition:relativeを設定する一般的なアプリケーション シナリオは、相対的に配置されたコンテナを作成して子要素をラップし、そのレイアウトを制御することです。子要素のtop、right、bottom、left属性を設定することで、親要素に対する子要素の位置やレイアウトを実現できます。

3. 絶対:

親要素が位置属性を絶対に設定すると、子要素の位置は、最も近い位置にある祖先要素を基準にしてオフセットできます。配置された祖先要素がない場合、子要素の配置は、ドキュメントの元の包含ブロックを基準にしてオフセットされます。

親要素がposition:absoluteを設定するための一般的なアプリケーションシナリオは、子要素の正確な位置を制御するために絶対位置のコンテナを作成することです。子要素の top、right、bottom、left 属性を設定すると、親要素またはドキュメントの最初の包含ブロックに対して子要素を正確に配置できます。

4.fixed:

親要素がposition属性をfixedに設定すると、子要素の位置はブラウザウィンドウを基準にしてオフセットされます。この配置方法はスクロールしても変更されず、子要素は常に固定位置に残ります。

親要素に location:fixed を設定する一般的なアプリケーション シナリオは、固定位置のコンテナーを作成して、ページ上にナビゲーション バーやフローティング ボックスなどの固定要素を作成することです。

概要:

親要素のposition属性を設定する目的は、子要素の位置とレイアウトを制御することです。位置属性を相対、絶対、または固定に設定することにより、親要素またはドキュメントに対して子要素を相対的に配置する方法を変更できます。この配置方法では、サブ要素の相対配置、絶対配置、または固定配置を実現できるため、より柔軟なレイアウト効果が得られます。

以上が親要素で位置を設定する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。