positionとdisplay:blockは一緒に使えますか？

使えます。 displayは「どんな箱になるか」、positionは「その箱をどこに置くか」を決めるプロパティで、役割がちがうからです。同じ要素に両方書いても問題ありません。ひとつだけ豆知識として、absoluteやfixedを指定すると、その要素は自動でblock相当に扱われます。なのでabsoluteの要素にdisplay:blockをわざわざ足す必要はありません。もちろん、書いても害はありません。

fixedのとき、親にposition:relativeは必要ですか？

いりません。 fixedの基準はいつも画面（ビューポート）なので、親に何を指定しても基準は変わらないからです。「上に戻るボタン」などは、親を気にせずそのまま置けます。ただし1つだけ落とし穴があります。祖先要素にtransformやfilterが付いていると、fixedの基準がその要素に変わります。スマホで固定ボタンが変な位置になるときは、たいていこれが原因です。

absoluteを使ったら、親の高さがつぶれました

absoluteの要素は浮いた扱いになり、親の高さに含まれなくなるためです。中身がabsoluteだけになると、親の高さが0になることがあります。親にheightやmin-height、padding などで高さを持たせると解決します。

要素を上下左右の中央に置きたいです

absoluteとtransform を組み合わせるのが定番です。 top・leftで50%動かし、 transformで自分の半分ぶんだけ戻すのがポイントです。 .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

position:stickyが効きません

原因はだいたい2つです。ひとつはtopやbottomを指定し忘れていること、もうひとつは親にoverflow:hiddenが付いていることです。どちらもstickyが貼り付かなくなるので、順番に確認してみてください。

CSS positionの使い方｜relative・absolute・fixed・stickyの違いをコピペで理解

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

positionは、要素を思いどおりの場所に置くためのプロパティです。
ただ、値によって「どこを基準にするか」が変わります。
そこが最初のつまずきポイントになります。

この記事では、relative・absolute・fixed・stickyの違いを動く見本で見比べます。
コードはそのままコピペして使えます。

目次表示

positionの基本｜5つの値と「基準」の考え方
relative｜自分の「元の位置」が基準
absolute｜position指定された「親」が基準
fixed｜画面に固定される
sticky｜スクロールで途中まで追従して止まる
positionでよくあるつまずき
コピペで使える実用パターン
CSSの追加方法
positionのよくある質問
まとめ

目次へ

positionの基本｜5つの値と「基準」の考え方

positionには、主に5つの値があります。
大事なのは「何を基準に位置を決めるか」という一点です。
ここがわかると、あとはぐっと楽になります。

static：初期値。top・leftなどの位置指定は効きません。
relative：自分の「元の位置」が基準。そこからずらします。
absolute：position指定された親が基準。浮いた状態で配置されます。
fixed：画面（ビューポート）が基準。スクロールしても固定されます。
sticky：普段は普通に配置され、スクロールで途中まで追従して止まります。

この記事では、実際によく使うrelative・absolute・fixed・stickyの4つを順番に見ていきます。
staticは「初期値＝何も指定しない状態」なので、比較用として押さえておけば大丈夫です。

relative｜自分の「元の位置」が基準

relativeは、要素の元あった位置を基準にずらします。
下の見本では、真ん中のオレンジのボックスだけを右下にずらしています。

1 2 3

ポイントは、ずらしても元のスペースはそのまま残ることです。
だから、1番と3番のボックスは動きません。
2番だけが浮いてズレています。

<span class="moved">2</span>

.moved {
  position: relative;
  top: 20px;
  left: 20px;
}

relativeにはもうひとつ大事な役割があります。
それは、次に出てくるabsoluteの「基準」を作ることです。
ここは次の章でくわしく見ていきます。

absolute｜position指定された「親」が基準

absoluteは、要素を浮かせて自由な位置に配置できます。
positionのなかでいちばん使う値なので、ここだけはしっかり押さえてください。

基準になるのは、position指定がある親要素です。
下の見本では、親にposition:relativeを付けています。
その四隅に、子要素を置いています。

親：position:relative 左上右上左下右下

<div class="parent"><span class="child">右上</span></div>

.parent {
  position: relative; /* これが基準になる */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

ここでいちばん大事なのは、親にposition:relativeを付けるという定番パターンです。
親に何も指定がないと、absoluteはもっと外側を基準にしてしまいます。
最終的にはページ全体が基準になり、思わぬ場所に飛んでいきます。

「子をabsoluteで置きたいときは、親にrelative」。
この組み合わせを覚えるだけで、positionの8割は攻略できます。

fixed｜画面に固定される

fixedは、画面（ビューポート）を基準に固定されます。
スクロールしても、同じ場所にずっと留まります。
「上に戻るボタン」や「追従する予約バナー」でよく使います。

注意点は、fixedの基準は常に画面だということです。
absoluteのように親のrelativeは関係ありません。

下は、画面の右下に丸ボタンを固定するコードです。

<a href="#top" class="to-top">▲</a>

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

fixedは画面全体に固定される性質上、この記事内では動く見本を用意していません。
コピペして自分のページで表示すると、スクロールしても付いてくる動きが確認できます。
完成形は、この章のあとの「実用パターン」でも紹介しています。

sticky｜スクロールで途中まで追従して止まる

stickyは、普段は普通に置かれています。
スクロールで指定した位置まで来ると、そこに貼り付いて止まります。
目次やサイドバー、表の見出し固定でよく使います。

下の枠の中をスクロールしてみてください。
青い見出しが、上にくっついて止まります。

この見出しは追従します（top:0）

枠の中をスクロールしてみてください。

青い見出しが上にくっついて止まります。

本文はそのまま流れていきます。

見出しだけが上に残り続けます。

これがstickyの動きです。

目次や表の見出しでよく使います。

.toc {
  position: sticky;
  top: 20px;
}

stickyで大事なのは、topやbottomの指定が必須だという点です。
これがないと、どこで止まればいいか決まらず、貼り付いてくれません。
「stickyが効かない」ときは、まずここを確認してください。

positionでよくあるつまずき

absoluteが変な位置に飛んでいく

いちばん多いのがこれです。

原因はほぼ、親にposition指定がないことです。

置きたい要素の親に、position:relativeを付けてください。
それだけで、その親が基準になります。

z-indexを指定したのに効かない

z-indexは、positionがstatic以外の要素にしか効きません。

重なり順を変えたいのに効かないときは、その要素にrelativeやabsoluteが指定されているか確認してください。

stickyが貼り付かない

よくある原因は2つです。

ひとつは、topやbottomを指定し忘れているケースです。
もうひとつは、親要素にoverflow:hiddenが付いているケースです。
この場合はstickyがうまく働かないので、親のoverflowを見直してください。

そのほか「書いたCSSがそもそも反映されない」ときは、別記事にまとめています。
CSSが効かないときのチェックリストもあわせてどうぞ。

コピペで使える実用パターン

ここからは、そのまま使える実用パターンを紹介します。
ほとんどが「親にrelative、子にabsolute」の応用です。
見比べながら、必要なものをコピペしてください。

1. カードの右上に「NEW」バッジ

NEW

カードの中身。右上にバッジを重ねています。

<div class="card">
 <span class="card__badge">NEW</span>
 <p>カードの中身</p>
</div>

.card {
  position: relative;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 10px;
  background: #e8663d;
  color: #fff;
  font-size: 12px;
  border-radius: 999px;
}

カードそのもののデザインは、別記事で見本を用意しています。
カードデザインの見本集とあわせて使うと便利です。

2. 左上に斜めのリボン

SALE

ポイントは、親にoverflow:hiddenを付けることです。
はみ出したリボンの角がカットされ、きれいな三角形になります。

<div class="thumb">
 <span class="ribbon">SALE</span>
</div>

.thumb {
  position: relative;
  overflow: hidden;
}
.ribbon {
  position: absolute;
  top: 16px;
  left: -34px;
  width: 130px;
  transform: rotate(-45deg);
  background: #e8663d;
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 4px 0;
}

3. 画像の上に文字を重ねる

画像の上に文字

見本ではグラデーションで代用していますが、実際は画像を置きます。
親をrelativeにして、文字をabsoluteで好きな位置に重ねるだけです。

<div class="hero">
 <img src="sample.jpg" alt="">
 <p class="hero__text">見出しテキスト</p>
</div>

.hero {
  position: relative;
}
.hero img {
  display: block;
  width: 100%;
}
.hero__text {
  position: absolute;
  left: 16px;
  bottom: 14px;
  margin: 0;
  color: #fff;
  font-size: 20px;
}

4. アイコンの右上に通知バッジ

🔔3

<span class="icon">🔔<span class="icon__count">3</span></span>

.icon {
  position: relative;
  display: inline-block;
  font-size: 34px;
}
.icon__count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  background: #e14b4b;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
}

5. ホバーでキャプションがスライドイン

ホバーで下から出てくるキャプション

↑ マウスを乗せてみてください（スマホはタップ）

absoluteで下に隠しておいたキャプションを、ホバーでtranslateYで引き上げるパターンです。
transitionを組み合わせると、ふわっと動きます。

<div class="photo"><img src="sample.jpg" alt="">
 <p class="photo__cap">キャプション</p>
</div>

.photo {
  position: relative;
  overflow: hidden;
}
.photo img {
  display: block;
  width: 100%;
}
.photo__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  transform: translateY(100%);
  transition: transform .3s;
}
.photo:hover .photo__cap {
  transform: translateY(0);
}

ホバーの動きをもっと増やしたいときは、別記事に見本を集めています。
ホバー効果の見本集もどうぞ。

6. スクロールで追従する目次（sticky）

枠の中をスクロールすると…

左の「目次」が追従します。

本文だけが流れていきます。

目次はしばらく画面に残ります。

サイドバー固定の定番パターンです。

.toc {
  position: sticky;
  top: 12px;
}

7. 「上に戻る」追従ボタン（fixed）

画面の右下に固定する、定番の「上に戻る」ボタンです。
fixedは画面に固定されるので、この記事内では見本を出していません。
コピペして自分のページで試すと、スクロールしても付いてくるのが確認できます。

<a href="#top" class="to-top">▲</a>

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: #4a90d9;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
}

CSSの追加方法

コピペしたCSSをWordPressに追加する方法は、別記事でまとめています。
いちばん手軽なのは、外観 → カスタマイズ → 追加CSS に貼る方法です。
くわしい手順はWordPressにCSSを追加する方法をご覧ください。

positionのよくある質問

positionとdisplay:blockは一緒に使えますか？: 使えます。
displayは「どんな箱になるか」、positionは「その箱をどこに置くか」を決めるプロパティで、役割がちがうからです。
同じ要素に両方書いても問題ありません。
ひとつだけ豆知識として、absoluteやfixedを指定すると、その要素は自動でblock相当に扱われます。
なのでabsoluteの要素にdisplay:blockをわざわざ足す必要はありません。
もちろん、書いても害はありません。

fixedのとき、親にposition:relativeは必要ですか？: いりません。
fixedの基準はいつも画面（ビューポート）なので、親に何を指定しても基準は変わらないからです。
「上に戻るボタン」などは、親を気にせずそのまま置けます。
ただし1つだけ落とし穴があります。
祖先要素にtransformやfilterが付いていると、fixedの基準がその要素に変わります。
スマホで固定ボタンが変な位置になるときは、たいていこれが原因です。

absoluteを使ったら、親の高さがつぶれました: absoluteの要素は浮いた扱いになり、親の高さに含まれなくなるためです。
中身がabsoluteだけになると、親の高さが0になることがあります。
親にheightやmin-height、padding などで高さを持たせると解決します。

要素を上下左右の中央に置きたいです: absoluteとtransform を組み合わせるのが定番です。
top・leftで50%動かし、transformで自分の半分ぶんだけ戻すのがポイントです。
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}