CSSで背景画像と擬似要素を重ねる方法｜z-indexが効かない場合の解決策

背景画像の前後に擬似要素（::before・::after）を重ねたい場面はよくあります。

しかし、背景画像は通常の要素とは描画の仕組みが異なるため、z-indexだけでは期待した重なり順にならず、ラッパー要素を追加して対応するケースも少なくありません。

この記事では、HTMLを増やさずに背景画像と擬似要素を重ねる方法を紹介します。
あわせて、z-indexでは実現できない理由と、transform: translateZ()を利用した解決方法も解説します。

CodePen デモ

まずは以下のデモをご覧ください。

See the Pen CSSで作るフキダシ（ドットの画像を重ねる） by mkl may (@mkl-may) on CodePen.

z-index のみで重なりを指定した場合は、ドット柄がフキダシの前面にきてしまいます。

一方、transform: translateZ() で重なりを指定した場合は、ドット柄がフキダシの背面にきます。

z-index だけで指定した例

まずは一般的な z-index だけで指定した例です。

一見すると、
・背景画像
・擬似要素
の重なり順を変更できそうですが、期待通りには表示されません。
背景画像は擬似要素とは別の要素ではなく、要素の背景として描画されるため、z-indexで個別に前後関係を変更することはできません。

transform: translateZ()で背景画像の背面へ配置する方法

transform-style: preserve-3d と translateZ() を利用すると、擬似要素を奥行き方向へ移動できます。
そのため、背景画像より背面に配置できます。

ポイントは次の3つです。

• transform-style: preserve-3d で子要素の3D変形（奥行きの情報）を維持する
• translateZ(0) で奥行き方向の配置を有効にする
• translateZ(-1px) で擬似要素を親要素より奥へ移動する

その結果、HTMLを増やさずに、擬似要素を背景画像の背面へ配置できます。

translateZ()は、要素を奥行き方向（Z軸）へ移動するCSSです。

z-indexは通常の前後関係を制御できますが、背景画像自体の描画順は変更できません。

一方、transformを利用して奥行きを扱えるようにすると、擬似要素を親要素より奥へ配置できるため、背景画像の背面に表示できます。

まとめ

背景画像と擬似要素を重ねたい場合は、z-indexだけでは期待した前後関係にならないことがあります。

そのような場合は、transform-style: preserve-3dとtranslateZ()を利用することで、ラッパー要素を追加せずに背景画像の背面へ擬似要素を配置できます。

吹き出しやカードデザイン、装飾ボックスなど、HTMLを増やしたくない場面で便利なテクニックです。