CSSのpositionプロパティについてちょっとまとめてみた

2017-04-21

どうも、すんです。サイトコーディング時によく使うpositionについて、今回は自分のメモ的な意味も含めて簡単にまとめてみようと思います。たとえばコンテンツを重ねたかったり、要素を画面の特定の位置に固定したかったり。そんな時に使えるのがこのpositionです。

position:static

staticは、positionの初期値です。(何の指定もしていない時にはこのstaticが適用されています。)top、right、bottom、left、z-indexは、positionがstaticだと使用できないので注意が必要。

わざわざposition:staticを要素に対して設定することなんてほとんどないんですが、強いていうならCMSの既存テーマなどのabsoluteがかかってるところをstaticに、!importantで無理やり設定しちゃおう！とかそういう時には使えるかもしれません。(まあ、まずありませんね)

position:relative

relativeは相対位置指定となります。relativeの要素が本来配置される位置(左上)を基準にして、そこから指定した距離の場所に配置されます。

relative

【CSS】

.relative {
   position: relative;
}

position:relativeが設定された要素に対して、top、right、bottom、leftプロパティを設定すると、本来表示される予定だった位置からの相対位置に配置するように調整されます。

relative

【CSS】

.relative {
   position: relative;
   top: 50px;
   left: 50px;
}

position:absolute

relativeが相対位置指定なのに対して、absoluteは絶対位置指定です。基本的に親要素に対して絶対位置を決めます。親要素にpositionプロパティのstatic以外の値が指定されている場合は、親要素の左上がposition:absoluteの基準位置になります。(親要素にpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウの左上が基準位置になります)

例えば、position:relativeの要素は、すでに前に要素が存在している場合には下図のように表示されます。

Box

relative

【html】

<div class="wrap">
  <div class="box">Box</div>
  <div class="relative">relative</div>
</div>

【CSS】

.wrap {
   position: relative;
}
.box {
   width: 150px;
   height: 100px;
}
.relative {
   width: 200px;
   height: 50px;
   position: relative;
   top: 0;
   left: 0;
}

ただし、position:absoluteの要素は下図のように、親要素に対して絶対位置で表示されます。

Box

relative

absolute

【html】

<div class="wrap">
  <div class="box">Box</div>
  <div class="relative">relative</div>
  <div class="absolute">absolute</div>
</div>

【CSS】

.absolute {
   width: 100px;
   height: 100px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}

position:absoluteについては絶対位置指定になるので、場所によってはこのように他の要素に重なるように表示されます。relativeの要素はtop:0やleft:0が設定されていても前にある要素を飛び越えることはありません。

また、absoluteの要素が複数存在する場合下図のようにz-indexの値によって重ね順が変わります。

absolute

absolute2

absolute3

【html】

<div class="wrap">
  <div class="absolute">absolute</div>
  <div class="absolute2">absolute2</div>
  <div class="absolute3">absolute3</div>
</div>

【CSS】

.absolute {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}
.absolute2 {
   position: absolute;
   top: 10px;
   left: 140px;
   z-index: 3;
}
.absolute3 {
   position: absolute;
   top: 60px;
   left: 50px;
   z-index: 2;
}

z-indexの値が一番大きい.absolute2が一番上にきているのが、上の図からわかると思います。このように複数のabsolute要素がある場合はz-indexの設定にも注意してみてください。

position:absoluteの使いどころとしましては、例えば要素に対してラベルを重ねたりだとか、ポイントの装飾を実装するときに使用することが多いです。
CSSだけでできちゃう！ラベルデザイン「リボン編」
例えば以前紹介した上記URLの記事でも、ラベルデザインの実装にposition:absoluteを使用しています。

position:fixed

fixedについてもabsoluteと同様絶対位置指定となりますが、このposition:fixedにはスクロールしても位置が固定されたままになるという最大の特徴があります。

例えば下にスクロールしていくと、ヘッダーやgnaviが画面上部にくっつくサイトデザインがありますよね。あれもposition:fixedを使用しています。あとはページトップに戻るボタンなんかも、ウィンドウの右下あたりにくっついたままのサイトがよくありますよね。

まとめ

positionについて今回はまとめてみましたが、例えばこのWandでも各記事のグリッドに乗っかった付箋のデザインなんかもposition:absoluteを使っていたりとか、まあなんだかんだ結構使うことの多いプロパティです。要素を重ねたりする場合、position:absoluteだけではなくネガティブマージンを使って実現することもできますが、それはまた別の機会にでも。

positionが使いこなせれば、え、こんなのできるの？っていうようなトリッキーなレイアウトも実現できるかも…しれません。