【CSS】positionのrelative、absolute、fixed、stickyの使い方を解説

今回は、CSSのpositionプロパティについて詳しく解説します。

positionはレイアウトに必須のプロパティなので、この記事を読んで必ず使えるようになりましょう。

positionの違いデモページ
static
relative
absolute
- position: absoluteは多用しない
fixed
- fixedのバグ
- iOSのSafariのfixed注意点
sticky
- position: stickyの注意点
z-indexのつけ忘れに注意
まとめ

positionの違いデモページ

とりあえず先にデモをご覧ください。

それぞれ全く異なる位置にあるのが分かりますね。

positionの値について、一つ一つ説明していきます。

static

まずはposition: static;についてです。

おそらくCSSを書いていてposition: staticを意識することはあまりありません。

positionの初期値はstaticで、特に指定がなければstaticになります。

leftやtopなどのプロパティで位置を変えることはできません。

.box {
  position: static;
  left: -1000000px; /* これは効かない */
}

デフォルトがstaticなので、特に記述する必要はありません。

また、重なり順を決めるz-indexも効きません。

relative

relativeは相対位置を指定する際に利用しますが、実際は以下のシチュエーションで使うのがほとんどです。

absoluteを指定した要素の親要素として使う
要素の重なり順（z-index）を使う

absoluteについては後ほど出てきます。

staticを指定した場合の位置を基準に、topやleft、right、bottomで位置を動かすことができます。

以下はサンプルコードです。

<div class="relative-content">
<p>position: relative;</p>
</div>
<div class="relative-content relative-content-2">
<p>position: relative;</p>
</div>

.relative-content {
  background-color: #eee;
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  z-index: 1;
  box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.relative-content-2 {
  left: 20px;
  top: 60px;
}

このコードは以下の画像ようになります。

topとleftを指定すると、

こんな感じです。

position: relativeにすると、z-indexが使えるようになります。

この二つの要素に、z-indexを指定してみましょう。

重なり順が変わりました。このように、重なりが生じる時はz-indexを使って順番を決めるようにして下さい。

absolute

基準からの絶対位置に配置するために使用します。基準となるのは、static以外が指定されている親要素です。

親要素にpositionを指定して、親要素の位置を基準にして配置します。

どの親要素にもstatic以外が指定されていない場合、ルート要素（html）が基準の位置となります。

.relative-content {
  position: relative;
  z-index: 1;
  background-color: #eee;
}
.absolute-content {
  position: absolute;
  left: 50px;
  top: 30px;
  z-index: 1;
  background-color: #ccc;
}

表示の例は画像のようなイメージです。top:50pxとleft:30pxの位置が

お次はこちらのデモをご覧ください。

position: absoluteは、絶対位置のため他の要素は関係なくその位置に来ます。そのため、下（z軸）にある要素の上に覆いかぶさります。

static以外を指定している兄弟要素（同じ親要素を持つ要素）が重なる時、z-indexの数字が大きい要素が上になります。

position: absoluteは多用しない

position: absoluteは一見簡単に配置ができますが、レスポンシブデザインとの相性はあまり良くありません。

基本的にはflexboxなどを使ってstaticのままレイアウトするのがベストで、position: absoluteの使用は最小限にしましょう。

fixed

ウィンドウの左上を基準とした絶対位置になります。

次のデモを開いて、スクロールしてみて下さい。

スクロールしてもウィンドウの定位置に固定されているのが分かります。

fixedのバグ

実は、position:fixedには「親要素にtransformが使われていると、相対位置になってしまうバグ」があります。

以下のデモでは、親要素にtransformプロパティを指定しています。

このように、ウィンドウに固定されなくなりました。

iOSのSafariのfixed注意点

もう一つ、iOSのSafariでも注意点があります。

JavaScriptでクラスを操作して、動的にposition:fixedが付与されるようにしてもうまく動きません。

CSS初心者にとっては「？？」かもしれませんが、iOS SafariでJavaScriptを使って固定させる際、うまく固定できないことがあるのは頭に入れておきましょう。

position:fixedが使われているクラスに、transform: translate3d(0, 0, 0);を指定すると解決します。

sticky

意外と知られていないのがstickyです。以前はJavaScriptで行なっていた配置を、stickyだけで実装できるようになりました。

デモを見て下さい。

topとbottomは縦スクロールされた時に固定される位置、leftとrightは横スクロールされた時に固定される位置です。

良く使われるのは、ユーザーに見てもらいたいコンテンツをサイドバーに固定させたるパターンです。

can I useを見てみると、主要ブラウザの全てでサポートされるようになりました。

IEが使われていた時代では同じレイアウトをJavaScriptを使って実現していましたが、IEのサポートが終了した今、stickyを使わない理由はありません。

position: stickyの注意点

親要素にoverflow: hidden か overflow: auto があると、position: stickyが使えなくなります。

overflowに関連する注意点はいくつかあり、一部を紹介すると以下の内容です。

overflow: hidden、overflow: autoだとstickyが効かない

overflow: scrollで高さの指定がないとstickyが効かない

overflow: scrollで高さの指定があると、そのブロック内でstickyが効く。この場合、先祖要素にoverflow: hiddenが指定されていても関係ありません

overflow: visibleだとstickyが効く

引用元：position: stickyの面白い使い方と使用時の注意点

position: stickyの注意点については、上記引用元の記事に詳しく書かれています。