なぜか「z-index」が効かない！？インライン要素と重なりの不思議を紐解く
Webサイトを作っていると、一度はこんな経験をしませんか？
「ボタンを文字の上に重ねたいのに、どう頑張っても裏側に隠れてしまう…」
「z-indexを1000にしても、全然言うことを聞いてくれない！」
CSSを書き始めたばかりの頃、この「重なり順」の問題は本当に頭を抱えるポイントですよね。でも、安心してください。これには、CSS界の「ちょっとしたお約束」が隠れているだけなんです。
今日は、インライン要素（`span`や`a`など）と`z-index`の切っても切れない関係について、一緒に紐解いていきましょう。
—
そもそも「z-index」ってどういう仕組み？
`z-index`は、いわば「重なり順を決めるための整理券」です。数字が大きいほど手前に表示されます。
しかし、この整理券、実は「ある条件」を満たしていないと受け取ってもらえないんです。その条件とは、要素に `position` プロパティが指定されていること。
具体的には、`static`（初期値）以外の値が必要です。
- `relative`（相対位置）
- `absolute`（絶対位置）
- `fixed`（固定位置）
- `sticky`（粘着位置）
もし、あなたが「`z-index`が効かない！」と悩んでいるなら、まずはその要素に `position: relative;` などを書き忘れていないかチェックしてみてくださいね。
—
インライン要素と「重なり」の罠
さて、ここからが本題です。`span`、`a`、`strong`、`em` といった「インライン要素」たちは、普段テキストの一部として流れるように配置されていますよね。
彼らは、いわば「行列に並んでいるお客さん」のような存在です。
1. インライン要素に「高さ」や「幅」は持てない？
インライン要素は、基本的に「文字の大きさ」に合わせて動くので、無理やり `top` や `left` を指定しても、なかなか意図通りに動いてくれません。
もし、インライン要素を自由に配置して `z-index` で重ねたいのであれば、まずはその要素を「浮かせられる状態」にしてあげる必要があります。
2. 「display: inline-block」という魔法
インライン要素をブロック要素のように扱い、かつ横並びを維持したいときは、`display: inline-block;` を使いましょう。これを使うと、`width` や `height` も指定できるようになり、`position` を使って重なりを制御しやすくなります。
—
実践！重なりをコントロールするコード
実際に、テキストの中に埋め込まれた要素を、少しだけ浮き上がらせて重ねる例を見てみましょう。
ここは普通の文章です。
ここは強調された重なる要素！
続きの文章です。
/ CSS /
.highlight {
/ 1. まずは位置指定ができるようにする /
position: relative;
/ 2. インライン要素でも大きさを扱えるようにする /
display: inline-block;
/ 3. これで初めてz-indexが効く！ /
z-index: 10;
/ 見た目を整える /
background-color: yellow;
padding: 2px 5px;
}
このコードのポイント
- `position: relative`: これがないと、`z-index`はただの空振りになってしまいます。「ここを基準に動かしますよ」という宣言ですね。
- `display: inline-block`: これを挟むことで、インライン要素の良さ（文章中に混ざる）と、ブロック要素の良さ（サイズ指定ができる）を両取りできます。
—
つまずいた時のチェックリスト
もし、まだ重なりがうまくいかないときは、以下の3つを確認してみてください。
1. 親要素に隠れていない？
たとえ自分の `z-index` を「9999」にしても、親要素の `z-index` が低ければ、親ごと後ろに回されてしまいます。
2. `position` は指定した？
`static` 以外の `position` が書かれているか、もう一度確認しましょう。
3. そもそも「重なる必要がある」？
無理に `absolute` で浮かせると、スマホで見た時にレイアウトが崩れやすくなります。もし可能なら、`margin` や `padding` で調整できないかも検討してみてくださいね。
—
最後に：Web制作に「失敗」なんてない！
最初は誰だって「なんでこうなるの！？」と画面の前で叫びたくなるものです。でも、そうやって一つずつ「なぜ効かないのか」を突き止めていくプロセスこそが、あなたを本物のエンジニアへと成長させてくれます。
インライン要素は、Webという広大な海を流れる「言葉」そのものです。そんな大事な要素を自由に操れるようになると、あなたの作るサイトはもっともっと、生き生きと輝き出しますよ。
今日学んだ `position` と `display` の関係、ぜひ次の制作で試してみてくださいね。応援しています！
コメント