dev TailwindCSS

TailwindCSS position 効かない？原因解決テクニック三選

TailwindCSS の position（absolute、sticky、z-index）が効かない原因と解決方法を3つのテクニックで解説します。実際のコード例とNG/OKパターンで、よくある失敗を防ぎましょう。

はじめに

TailwindCSS position 効かない——そんな経験はありませんか？

absolute を付けたのに要素が思った位置に来ない、sticky を付けてもスクロールで固定されない、z-50 を付けたのに前面に出てこない…。

position 系のクラスは、もう1つクラスを追加しないと動かないパターンが多いんです。

この記事では、position が効かない3つの原因と解決方法を、実際のコード例で解説します。

【体験談】私も relative / absolute で苦労しました

その前に、私の体験談を紹介させてください。

私は以前、カードの右上にバッジを配置しようとして、relative と absolute で苦労した経験があります。

当時は公式サイトを読んでも、いまいちよく分からなかったんですよね。見よう見まねで書いてみたものの、表示位置が大きくずれたり、バッジがそもそも出てこなかったり…。

結局手に負えなくてギブアップし、有識者の方に助けてもらいました。

正直、公式ドキュメントの説明って分かりづらいんですよね。今見ても思います。

同じように悩んでいる方の役に立てれば嬉しいです。

position が効かない原因と解決テクニック

それでは、position が効かない3つの原因と解決方法を見ていきましょう。

テクニック1: absolute を付けたのに親要素基準にならない

誤解シナリオ:

  1. 読者Aさんは、カードの右上にバッジを配置したい
  2. 公式ドキュメント（https://tailwindcss.com/docs/position）で absolute を見つける
  3. 「これだ！absolute top-0 right-0 を付ければいいんだ」と思い適用
  4. 「あれ？バッジがカードではなく画面の右上に行ってしまった…」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs bg-white rounded-lg p-4">
    <span class="absolute top-0 right-0 bg-red-500 text-white text-xs px-2 py-1 rounded">NEW</span>
    <h3 class="font-bold">商品名</h3>
    <p class="text-gray-600 text-sm">商品の説明文です</p>
  </div>
</div>
TailwindCSS position absolute NGパターン - バッジが画面右上に飛んでしまう

バッジが画面右上に飛んでしまいました。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="relative mx-auto max-w-xs bg-white rounded-lg p-4">
    <span class="absolute top-0 right-0 bg-red-500 text-white text-xs px-2 py-1 rounded">NEW</span>
    <h3 class="font-bold">商品名</h3>
    <p class="text-gray-600 text-sm">商品の説明文です</p>
  </div>
</div>
TailwindCSS position absolute OKパターン - バッジがカード右上に正しく配置

親に relative を追加することで、バッジがカード基準で配置されました。

解説:

absolute は「最も近い positioned ancestor（position: relative / absolute / fixed / sticky を持つ祖先要素）」を基準に配置されます。親に何も指定がないと、最終的に <body> が基準となり、画面全体を基準にした位置になってしまいます。

ポイント:

absolute を使うときは、基準にしたい親要素に relative を付けましょう。

テクニック2: sticky を付けたのにスクロールで固定されない

誤解シナリオ:

  1. 読者Bさんは、スクロール時にサイドバーの見出しを固定したい
  2. 公式ドキュメント（https://tailwindcss.com/docs/position）で sticky を見つける
  3. 「sticky を付ければスクロール時に固定されるはず」と適用
  4. 「あれ？スクロールしても固定されない…」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="h-48 overflow-auto bg-white rounded-lg">
    <div class="bg-blue-500 text-white p-3 font-bold">固定したい見出し</div>
    <div class="p-4 space-y-4">
      <p>コンテンツ1</p>
      <p>コンテンツ2</p>
      <p>コンテンツ3</p>
      <p>コンテンツ4</p>
      <p>コンテンツ5</p>
      <p>コンテンツ6</p>
    </div>
  </div>
</div>
TailwindCSS sticky NGパターン - スクロールしても固定されない

スクロールすると見出しも一緒に流れてしまいます。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="h-48 overflow-auto bg-white rounded-lg">
    <div class="sticky top-0 bg-blue-500 text-white p-3 font-bold">固定したい見出し</div>
    <div class="p-4 space-y-4">
      <p>コンテンツ1</p>
      <p>コンテンツ2</p>
      <p>コンテンツ3</p>
      <p>コンテンツ4</p>
      <p>コンテンツ5</p>
      <p>コンテンツ6</p>
    </div>
  </div>
</div>
TailwindCSS sticky OKパターン - スクロールしても見出しが固定される

top-0 を追加することで、スクロール時に上端で固定されるようになりました。

解説:

sticky は「どの位置で固定するか」を指定しないと機能しません。top-0 は「上端から0pxの位置に達したら固定」という意味です。top-4 なら上端から16pxの位置で固定されます。

ポイント:

sticky を使うときは、top-0 などの位置指定を忘れずに付けましょう。

テクニック3: z-index を付けたのに要素が前面に来ない

誤解シナリオ:

  1. 読者Cさんは、2枚のカードを重ねて表示し、1枚目を前面に出したい
  2. 公式ドキュメント（https://tailwindcss.com/docs/z-index）で z-50 を見つける
  3. 「z-50 を付ければ前面に来るはず」と適用
  4. 「あれ？まだ後ろのカードに隠れている…」と困惑

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs space-y-[-40px]">
    <div class="z-50 bg-white rounded-lg shadow-lg p-4">
      <p class="font-bold">前面に出したいカード</p>
      <p class="text-sm text-gray-600">z-50 を付けたのに...</p>
    </div>
    <div class="relative bg-yellow-200 rounded-lg shadow-lg p-4">
      <p class="font-bold">後ろにしたいカード</p>
      <p class="text-sm">このカードが上に来てしまう</p>
    </div>
  </div>
</div>
TailwindCSS z-index NGパターン - z-50を付けても前面に来ない

z-50 を付けても、白いカードが黄色いカードの後ろに隠れています。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-xs space-y-[-40px]">
    <div class="relative z-50 bg-white rounded-lg shadow-lg p-4">
      <p class="font-bold">前面に出したいカード</p>
      <p class="text-sm text-gray-600">relative を追加で解決!</p>
    </div>
    <div class="relative bg-yellow-200 rounded-lg shadow-lg p-4">
      <p class="font-bold">後ろにしたいカード</p>
      <p class="text-sm">このカードが下になった</p>
    </div>
  </div>
</div>
TailwindCSS z-index OKパターン - relativeを追加して前面に表示

relative を追加することで、z-50 が有効になり白いカードが前面に表示されました。

解説:

z-index は position: static（デフォルト）の要素には効きません。relative、absolute、fixed、sticky のいずれかが指定されている要素にのみ有効です。relative を追加しても要素の位置は変わらないので、z-index を効かせたいだけなら relative を付けるのが定番です。

ポイント:

z-* を使うときは、relative などの position 指定を忘れずに付けましょう。

まとめ

TailwindCSS position 効かない原因と解決方法を3つ紹介しました。

テクニック原因解決策
absolute が親基準にならない親に position 指定がない親に relative を追加
sticky が固定されない位置指定がないtop-0 などを追加
z-index が効かないposition: static のままrelative を追加

position 系のクラスは、単体では動かないことが多いです。「もう1つ何かを追加する」という意識を持っておくと、ハマりにくくなります。

この記事が参考になれば幸いです。また別の記事でお会いしましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）

[PR]オススメ講座

「実際に作りながら学んでみたい！」という方には、講師「Shin Code」さんのUdemy講座がオススメ！

Shin Codeさんの講座「【Tailwindcss3.0】利用者急増中！作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック」では、個人用ポートフォリオサイトを作りながらTailwindCSSについて学習することができます。ポートフォリオサイトによくあるナビゲーションやヒーローセクションといった部品をTailwindCSSでどう書けばよいか、講師の方も一緒に手を動かしながら解説してくれています。

TailwindCSS初心者だった私でも一緒に手を動かして写経したら完成したので、個人的にオススメの講座です！

講座の詳細を見る

-dev, TailwindCSS