CSSにおけるZ軸方向の要素重なり調整

要素の重なり順序は、整数の正の数、負の数、またはゼロを値として取る z-index プロパティを使用して調整できます。このプロパティは、 position プロパティの値が absolute、fixed、 または relative として設定されている要素に対してのみ機能します。

このプロパティを使用する場合の要素重なりルールは次のとおりです： z-index の値が大きい要素が前面に表示されます。

前の例の要素の重なり順序を変更してみましょう。そのために、 最初の要素の z-index を2番目の要素よりも大きく設定します。 例えば、次のようにします：

css#elem1 {
  z-index: 2;
}
#elem2 {
  z-index: 1;
}

コード実行結果：