CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのz-indexプロパティを使って要素をレイヤー状に重ねる方法

CSSのz-indexプロパティを使用すると、開発者は複数の要素を互いに重ねて表示できます。z-indexには正の値も負の値も指定可能です。

z-indexの基本ルール

注意：重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。

それでは、z-indexプロパティの具体的な使用例を見ていきましょう。

例1：背景画像とボックスシャドウの重ね合わせ

以下の例では、段落要素に対して背景画像・パディング・ボックスシャドウを設定し、要素がどのように重なって表示されるかを確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background: url("https://www.tutorialspoint.com/arangodb/images/arangodb.jpg");
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}
</style>
</head>
<body>
<h2>ArangoDB</h2>
<p>ArangoDBは、開発者からネイティブマルチモデルデータベースとして高く評価されています。これは他のNoSQLデータベースとは異なる特徴です。このデータベースでは、データをドキュメント、キー/バリューペア、またはグラフとして保存できます。
ネイティブマルチモデルデータベースであるArangoDBは、複数のデータベースをデプロイする必要をなくし、コンポーネントの数とその保守作業を削減します。その結果、アプリケーションの技術スタックの複雑さが軽減されます。技術的なニーズを統合することで全体がシンプルになり、総所有コスト（TCO）の低減と柔軟性の向上にもつながります。</p>
</body>
</html>

出力結果

上記のコードを実行すると、背景画像が表示され、黒い影（box-shadow）がテキストブロックの周囲に重ねられて描画されます。

例2：負のz-index値によるレイヤー制御

次の例では、負のz-index値を使って、複数のdiv要素とp要素の重なり順序を制御しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div{
   margin: auto;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
}
div:first-child {
   background-color: orange;
   width: 270px;
   height: 120px;
   z-index: -2;
}
div:last-child {
   width: 250px;
   height: 100px;
   z-index: -1;
   background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>変数とは、値を格納するために予約されたメモリ上の場所のことです。つまり、変数を作成すると、メモリ内に一定の領域が確保されるということです.............</p>
<div></div>
</body>
</html>

出力結果

このコードを実行すると、オレンジ色のボックス（z-index: -2）が最背面に、ターコイズ色のボックス（z-index: -1）がその手前に配置され、テキストがそれらより前面に表示されます。z-indexの値が小さいほど奥に、大きいほど手前に表示されることがわかります。

まとめ

z-indexプロパティは、positionプロパティ（relative、absolute、fixed、sticky）が設定された要素に対してのみ有効です。値が大きい要素ほど前面に表示され、負の値を指定すれば他の要素の背後に配置することもできます。モーダルウィンドウやドロップダウンメニューなど、UIの重なり順序を制御したい場面でぜひ活用してください。

  1. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効

  2. CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法

    Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit