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
なブロックはこのページの上の方に現れる。