【CSS】positionによる配置制御

CSS

2021/04/04

配置位置

要素の配置場所は、top, bottom, left, rightプロパティによって決めることができます。

プロパティの値＝0の位置が基準位置となり、ここからどれだけ移動させるかを指定します。

CSS

//左上に配置
.elm1 {
  left: 0;
  top: 0;
}

//右下に配置
.elm2 {
  right: 0;
  bottom: 0;
}

//左上から右方向に50px、下方向に50pxの位置に配置
.elm3 {
  left: 50px;
  top: 50px;
}

//右下から左方向に50px、上方向に50pxの位置に配置
.elm4 {
  right: 50px;
  bottom: 50px;
}

elm1

elm2

elm3

elm4

しかし、通常の要素はこのような配置制御は行えません。

これから説明するpositionプロパティによって要素の配置制御の可否や基準位置（それぞれ0となる位置）などが決まります。

position

positionプロパティは、ブロック要素の配置に関するプロパティで、以下の値があります。

static

staticは通常の配置で、positionのデフォルト値です。

要素の位置を変更することはできません。

relative

relativeは、初期配置はstaticと同じです。この位置をを基準位置として要素の位置を変更できます。

HTML

<div>
  1
</div>
<div style="position: relative; top: 10px">
  2
</div>
<div>
  3
</div>

absolute

absoluteはrelativeと同じく要素の位置を変更できますが、基準位置が異なります。

absoluteの基準位置は、祖先の中で最も近いposition: relativeの各端になります。 position: relativeの要素がない場合は、ルート要素が基準になります。

HTML

<div style="position: relative">
  <div>
    <div style="position: absolute; top: 0; left: 0"></div>
  </div>
  <div style="position: relative">
    <div style="position: absolute; top: 0; left: 0"></div>
  </div>
</div>

fixed

fixedは表示領域（ビューポート）の各端を基準位置とし、配置を変えることができます。 absoluteと違い、祖先の要素に影響されません。

また要素は画面に固定されます。つまり、スクロールしても要素は動くことなく止まり続けます。

HTML

<div style="position: fixed; top: 0; left: 0">
  fixed
</div>

表示非表示

fixed

sticky

stickyはスクロール領域に対する配置指定です。

初期配置はstaticと同じですが、スクロールによって特定の位置にきた場合に、要素を固定します。

HTML

<div style="height: 250px; overflow-y: scroll">
  <div style="height: 1000px;">
    <div style="height: 25px"></div>
    <div style="position: sticky; left: 0; top: 0">
      sticky
    </div>
  </div>
</div>

static

sticky

z-index

z-indexは、positionの配置制御による要素の重なりを制御するプロパティです。

設定するのは数値で、値が大きい要素が上になるように重なります。

HTML

<div style="position: relative">
  <div style="position: absolute; left: 0; top: 0; background: red; z-index: 1">
    elm1
  </div>
  <div style="position: absolute; left: 50px; top: 50px; background: blue; z-index: 4">
    elm2
  </div>
  <div style="position: absolute; left: 100px; top: 100px; background: orange; z-index: 2">
    elm3
  </div>
  <div style="position: absolute; left: 150px; top: 150px; background: green; z-index: 3">
    elm4
  </div>
</div>