【CSS初心者向け】::beforeの線がimg要素の下に隠れてしまう時の対処法

はじめに

「CSSでタイムラインを作っていて、縦の線を ::before 擬似要素で描画したら、アイコン画像が線の後ろに隠れてしまった…」

こんな現象に困ったことはありませんか？

私自身、Webマーケティングの業務でポートフォリオサイトを作る中で、まさにこの問題に直面しました。HTMLとCSSはある程度触ってきたつもりでも、「z-indexってなんだっけ？」状態だったので、ChatGPTの力を借りながら試行錯誤しました。

この記事では、CSS初心者でも理解できるように、::beforeで作った縦線とアイコン画像の重なり順を正しく調整する方法を解説します。

---

対象読者

• HTML/CSS初級者の方
• Webサイトやポートフォリオでタイムライン風レイアウトを作っている方
• ::before 擬似要素や z-index の扱いでつまずいたことがある方

---

記事を読むメリット

• ::before 擬似要素の基本的な使い方がわかる
• z-index の具体的な使用例を理解できる
• 要素の「重なり順」を直感的にコントロールできるようになる

---

結論

::beforeで作った線が画像の前に出てしまう場合は、画像側に position: relative と z-index: 1 を指定するだけで解決できます。

逆に、::before には z-index: 0 を指定し、背景として扱います。

---

本文

問題の構造

.timeline__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    width: 2px;
    background-color: black;
    z-index: 0;
}

このCSSは、左側に縦線を引くための ::before 擬似要素です。

一方で、アイコンは以下のように書かれていました。

.timeline__icon {
    margin-right: 14px;
    width: 44px;
    height: 44px;
}

この状態だと、画像が z-index を持たないため、擬似要素より後ろに描画されてしまいます。

解決策

画像が前に表示されるように、次の2つの指定を追加します。

.timeline__icon {
    margin-right: 14px;
    width: 44px;
    height: 44px;
    position: relative; /* ← 追加 */
    z-index: 1;          /* ← 追加 */
}

これで、::before の線よりも画像が前に表示されるようになります！

なぜ position が必要なの？

z-index は position が relative、absolute、fixed、sticky のときにだけ効果を発揮します。
初期状態の position: static では z-index が無効なんです。

---

まとめ

今回の技術的なポイントをまとめると、以下の通りです。

• ::before で線を引くときは position: absolute; と z-index: 0 を指定しておく
• 重ねたい要素（今回は .timeline__icon）には position: relative; と z-index: 1 を指定する
• z-index を使うときは、必ず position をセットで使う

簡単なことのようで、CSS初心者には意外とつまずきやすいポイントです。

---

おわりに

CSSの「重なり順」って、初心者の頃は特に理解しづらい部分だと思います。

ですが、position と z-index の基本ルールさえ押さえれば、今回のような見た目のバグもシンプルに解決できます。この記事が、あなたの制作をちょっとでもスムーズにする助けになれば嬉しいです。

Zennでは、マーケターやノンエンジニアの目線から「ちょっとしたCSSやHTMLのつまずき」を記録していく予定なので、フォローしてもらえると励みになります！