ポジショニングレイアウト）

1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。
2. 流動的なレイアウト<br />上記で述べた float:left の状況。
3. レイアウトの配置<br />相対配置と絶対配置はどちらも親 div タグを基準とします。
相対 - 要素の元の位置を参照ポイントとして使用します。絶対 - 親 div タグの原点 (左上隅) を参照ポイントとして使用します。

外側のレイヤーは position:relative なので、内側のレイヤーが absolute の場合は、外側のレイヤーの左上隅を変位の基準として配置されます。もちろん、外側のレイヤーには position:relative のみが記述され、left と top の 2 つの値が記述されます。これは、この要素が本来配置されるべき位置が、左揃えと上揃えのレイアウト参照原点として使用されることを意味します。

また、外側のレイヤーに position:absolute が 1 つしかなく、position:relative がないという状況もあります。このとき、どのポイントが基準として使用されるでしょうか。このときの原則は、親要素に相対要素がある場合は親要素が参照原点として使用され、position:relative がない場合は body が参照原点として使用されるというものです。 position:absolute の相対的な外側のレイヤーがない場合、2 つのレイアウトに違いはありません。

もちろん、最後のケースは、外側のレイヤーが position: absolute、内側のレイヤーが position: relative の場合、何が起こるでしょうか?本来の原則によれば、絶対は本体をレイアウト原点として参照し、相対はそれが本来あるべき位置をレイアウト原点として参照します。このとき、実際には外側のレイヤーの左上隅をレイアウト原点として参照します。
残りは実際の状況によって異なります。

<<: React Hooksコンポーネント間で値を渡す方法の詳細な説明（tsを使用）

>>: MySQL プロジェクトでトランザクション分離レベルを選択する方法