TailwindCSS における relative と absolute とは CSS における position 指定の種類のこと。
詳細: “position - CSS: カスケーディングスタイルシート | MDN”
この辺に変なブロックが出ているがこれは最後の実験によるもの
ルートブロック
親ブロック
2段落目
ルートブロック
親ブロック(relative)
2段落目
ルートブロック
親ブロック(relative)
2段落目
ルートブロック
親ブロック
2段落目
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 なブロックはこのページの上の方に現れる。