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

CSSのz-indexプロパティの使い方をわかりやすく解説

CSSのz-indexプロパティは、positionプロパティと組み合わせて使用することで、要素に重なり順(レイヤー)の効果を持たせることができます。どの要素を手前に表示し、どの要素を奥に配置するかを数値で指定できます。

z-indexの基本ルール

  • 値が大きいほど手前に表示されます(例：z-index:3 の要素は z-index:1 の要素より上に重なります)。
  • z-indexは、positionが relative、absolute、fixed、sticky のいずれかに設定された要素に対してのみ有効です。
  • 初期値は auto で、この場合はHTMLの記述順に従って重なります。

サンプルコード

以下のコードを実行すると、3つのdiv要素がz-indexによって重なり順を制御されている様子を確認できます。

<html>
   <head>
   </head>
   <body>
      <div style = "background-color:blue; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2">
      </div>
      <div style = "background-color:gray; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;">
      </div>
      <div style = "background-color:yellow; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;">
      </div>
   </body>
</html>

コードのポイント

この例では、青・グレー・黄色の3つのボックスを position:relative で配置し、それぞれ異なる z-index 値を指定しています。

  • 黄色のボックス(z-index:3)が最も手前に表示されます。
  • 青のボックス(z-index:2)は中間のレイヤーに配置されます。
  • グレーのボックス(z-index:1)が最も奥に表示されます。

このようにz-indexを使いこなすことで、モーダルウィンドウやドロップダウンメニュー、ツールチップなど、要素を重ねて表示するUIを自由にデザインできるようになります。

  1. CSSのpositionプロパティを使って要素を自在に整列する方法

    CSSでは、positionプロパティとtop・right・bottom・leftなどのオフセットプロパティを組み合わせることで、要素を思い通りの位置に整列させることができます。 positionプロパティで使える主な値 static — 初期値。通常の文書フローに従って配置され、オフセットプロパティは無効になります。 relative — 要素の本来あるべき位置を基準に、相対的にずらして配置します。 absolute — positionが指定された直近の親要素を基準に、絶対的な位置へ配置します。 fixed — ブラウザのビューポート(表示領域)を基準に固定され、スクロールしても動きませ

  2. CSSのdisplayプロパティとは？各値の違いと使い方を実例付きで解説

    CSSのdisplayプロパティとは すべてのHTML要素には、CSSのdisplayプロパティにあらかじめデフォルト値が設定されています。このプロパティは、その要素がドキュメント内でどのように描画されるかを決定する重要な役割を持っています。 注意： デフォルトのdisplayプロパティは上書きすることができますが、これは要素そのものの種類が変わるわけではなく、ドキュメント上での表示の挙動が変化するだけである点に留意してください。 displayプロパティの主な値 displayプロパティにはさまざまな値を指定できますが、特によく使われる代表的な値は以下の4つです。 block（ブロック）