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

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

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

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の注意点については、上記引用元の記事に詳しく書かれています。

z-indexのつけ忘れに注意

positionを使ってレイアウトをしていると、要素が突然消えてしまうことがあります。初心者の頃はこれで焦りました。

多くの場合z-indexを指定していないために、他の要素の下に隠れてしまっているのが原因です。

absoluteやfixed、stickyを使う時はz-indexが指定するようにしましょう。

まとめ

Webサイトをレイアウトするには、positionプロパティは必ず覚えておく必要があります。

要素をスクロール追従・固定配置したり、要素内の中央に配置したりと、様々な場面で活躍します。

使い方がよく分かっていないという人は、しっかり学習して使えるようになりましょう。


他にもこんな記事があります。