Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
構文・カスケード Widely available

z-index

z-index は位置指定された要素（position が static 以外）の重なり順序を制御するプロパティです。スタッキングコンテキストの仕組みを理解することが、z-index を効果的に使うための鍵です。モーダル、ドロップダウン、ツールチップなどのUI要素の前後関係を管理するために不可欠です。

重なり順序スタッキング

概要

z-index は位置指定された要素（position が static 以外）の重なり順序を制御するプロパティです。スタッキングコンテキストの仕組みを理解することが、z-index を効果的に使うための鍵です。モーダル、ドロップダウン、ツールチップなどのUI要素の前後関係を管理するために不可欠です。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 3+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

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

実務での使いどころ

  • UIレイヤーの管理

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

注意点

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

アクセシビリティ

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

参考リンク