CSS – positionプロパティのrelativeとabsoluteの関係

positionプロパティ

floatとmargin-left(子ボックス)またはpadding-left(親ボックス)を使わずとも、positionとtopとleftで位置を動かすことができます。

  1. static : 何も指定しないのと同じ(staticを指定することはない)。
  2. relative : 親要素のpositionに関係なく、親要素のコンテンツ直下から相対的に位置をずらす
  3. absolute :
    1. 親要素のpositionがstatic(またはpositionなし)ならウィンドウの枠の左上が基準
    2. 親要素のpositionがrelativeまたはabsoluteなら親要素と同じ位置を基点
  4. fixed : ウィンドウの特定の位置に固定。

親ブロック要素がstaticの場合

  1. 親要素static、子要素staticは、position属性がないのと同じなので、親コンテンツの下に続く。

  2. 親要素static、子要素relativeは、親要素のコンテンツの下から位置をずらす。

  3. 親要素static、子要素absoluteは、子要素はウィンドウ全体の枠を基点とする。

親ブロック要素がrelativeの場合

  1. 親要素relative、子要素staticは、position属性がないのと同じなので、親コンテンツの下に続く。

  2. 親要素relative、子要素relativeは、親要素のコンテンツの下から位置をずらす。

  3. 親要素relative、子要素absoluteは、親要素の基点から位置をずらす。

親ブロック要素がabsoluteの場合

親ブロックがabsoluteであれば親ブロックが配置の基準になるとはいえ、元の領域を確保しないので下の子ブロックが上詰めで浮き上がり重なり合います。

  1. 親要素absolute、子要素staticは、position属性がないのと同じなので、親コンテンツの下に続く。

  2. 親要素absolute、子要素relativeは、親要素のコンテンツの下から位置をずらす。

  3. 親要素absolute、子要素absoluteは、親要素の基点から位置をずらす。

こんな投稿も読まれています