Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

z-index

z-index は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムやグリッドアイテムの z 順を定義します。 z-index がより大きな要素はより小さな要素の上に重なります。

重なり順序スタッキング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
z-index
1
12
1
1
18
1
auto
1
12
1
1
18
1
negative values

負の値
1
12
3
1
18
1
その他
css.types.integer

は CSS のデータ型で、 number の特殊型であり、正と負の整数を表現します。整数は数多くの CSS プロパティや記述子で使用することができます。例えば column-count, counter-increment, grid-column, grid-row, z-index プロパティや @counter-style/range 記述子などです。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.dropdown { z-index: 100; }
.modal-backdrop { z-index: 999; }
.modal { z-index: 1000; }
.tooltip { z-index: 1100; }

ライブデモ

Z-index stacking order

CSS Z-index stacking order demo.

プレビュー全画面表示

Dropdown style

CSS Dropdown style demo.

プレビュー全画面表示

Layer structure

CSS reiya-structure demo.

プレビュー全画面表示

実務での使いどころ

  • UIレイヤーの管理

    モーダル、ドロップダウン、ツールチップなどのUI要素に体系的なz-index値を割り当て、正しい重なり順序を維持します。

注意点

  • z-index は position が static 以外の要素にのみ適用されます。また、999999 のような極端な値は避け、体系的な値の管理を行ってください。

アクセシビリティ

  • z-index で視覚的に前面に表示される要素が、DOMの読み上げ順序やフォーカス順序と矛盾しないよう注意してください。

参考リンク