1. ホーム
  2. Web制作
  3. HTML/Xhtml

html+cssの3種類のレイアウト(ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト)。

2022-01-27 05:02:45
1. ナチュラルレイアウト
何も手を加えないレイアウトは、自動的に左側になります。
2. フローレイアウト
上記のfloat:leftの場合です。
3. 位置決めレイアウト
相対配置、絶対配置ともに、親divタグからの相対位置です。
相対 ------ この要素があるべき位置を基準点としています。
絶対 - 親 div タグの原点(左上隅)を基準点としています。
外側のレイヤーがposition:relativeなので、内側のレイヤーがabsoluteの場合、外側のレイヤーの左上を変位基準として整列されます。もちろん、外側のレイヤーがposition:relativeのみで、left,topと書かれている場合は、その要素があるべき位置をレイアウトの参照原点としてleft,topを揃えなさい、という意味になります。
もうひとつ、position:absoluteがあるだけで、外層にposition:relativeがない状況もあり、その場合は何を基準に探せばいいのだろうか。この時の原則は、親要素にrelativeがあれば親要素が参照元となり、position:relativeがなければ本体が参照元となります。外側のposition:absoluteにrelativeがなければ、2つのレイアウトに差はない。
もちろん最後のケースは、外側のレイヤーが:position:absolute、内側のレイヤーがposition:relative、ではどうでしょう。本来の原理からすると、absoluteはボディをレイアウトの原点として参照し、relativeは彼がいたはずの位置をレイアウトの原点として参照することになり、実際にはアウターレイヤーの左上隅をレイアウトの原点として参照することになるのですが、この場合はどうなるのでしょうか?
あとは実際の状況によって変わります。