並び・配置

`z-index` 重なりの順番を決める

重要度4 / 5

意味

同じ場所に重なった要素の、手前と奥を決める場合に使います。数値が大きいほど手前に来ます。初期値は auto です。

効かせるには、先に position を static 以外（relative、absolute、fixed、sticky）へ変えます。position だけ変えて z-index を書かないと、後から書いた要素が手前に来ることがあります。

親子で別の重ね順を作ると、子の数字が大きくても、親の後ろに回り込みます。モーダルや固定ヘッダーが隠れたときは、親の z-index と position も見ます。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="stage">
  <span class="back">奥</span>
  <span class="front">手前</span>
</div>

CSS

.stage {
  position: relative;
  height: 6rem;
  background: #f3f1ec;
}
.back {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  background: #efeef8;
  padding: 0.7rem 1.1rem;
}
.front {
  position: absolute;
  left: 2.4rem;
  top: 1.8rem;
  z-index: 2;
  background: #160076;
  color: #fff;
  padding: 0.7rem 1.1rem;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	1〜
Firefox	1〜
Safari	1〜
Edge	12〜
Chrome Android	18〜
Safari iOS	1〜

出典: MDN Web Docs（`@mdn/browser-compat-data`）

意味

コード

セットで使う指定

ブラウザ対応