TailwindCSS における relative と absolute について

TailwindCSS における relativeabsolute とは CSS における position 指定の種類のこと。

詳細: “position - CSS: カスケーディングスタイルシート | MDN”

この辺に変なブロックが出ているがこれは最後の実験によるもの

実例サンプル

なし - なし

relative - 無し

relative - absolute

abs

なし - absolute

abs

??何かテキストを入れてみる

なし - なし

ルートブロック

親ブロック

2段落目

relative - 無し

ルートブロック

親ブロック(relative)

2段落目

relative - absolute

ルートブロック

親ブロック(relative)

2段落目

abs

なし - absolute

ルートブロック

親ブロック

2段落目

abs

mdn の解説で absolute の意味を理解する

absolute

要素は文書の通常のフローから除外され、ページレイアウト内にこの要素のための空間が作成されません。この要素に直近の位置指定されている祖先があればそれに対して、そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。

この値では、 z-index の値が auto ではない場合、新しい重ね合わせコンテキストを作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと相殺されません。

つまり

  • absolute は親ブロックの領域を広げないという特徴がある
  • top, right, bottom, left によって位置指定が出来る。ただし以下の制限がある
    • 親ブロックなどが position デフォルトの static の場合 top, right 等による位置指定の基準とはならない
    • その場合親ブロックを遡って relative の指定が見つからない場合、body タグ(の直下のブロックのセンター?)を基準座標として位置が決まる。
    • ただし、位置指定自体を行っていない場合は元の位置にとどまる。

「なし - absolute」と「relative - absolute」の結果が同じになるのは top, right... 等による位置指定をしていないのが原因。

「なし - absolute」と「relative - absolute」のケースで位置指定をしてみる

relative - absolute

rel - abs / 位置指定無し
rel - abs / top-6 left-48

なし - absolute

ここで位置指定している absolute なブロックはこのページの上の方に現れる。

なし - abs / 位置指定無し
なし - abs / top-32 left-32