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

CSSのz-indexプロパティを使ってレイヤー（重なり順）を作成する方法

CSSでレイヤー（要素の重なり）を作成するには、z-index プロパティを活用します。z-indexは、positionプロパティが relative、absolute、fixed、または sticky に設定された要素に対して有効になり、数値が大きいほど手前（上）に表示されます。

基本的な仕組み

  • position：要素を配置するために必要です。ここでは relative を使用しています。
  • top / left：要素の表示位置を調整します。
  • z-index：重なりの優先順位を決定します。値が大きいほど前面に表示されます。

サンプルコード

以下のコードでは、赤・黄・緑の3つのボックスを重ねてレイヤー構造を作成しています。

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

コードの解説

この例では、3つのdiv要素にそれぞれ異なるz-indexの値を設定しています。

  • 黄色のボックス（z-index: 1）が最も背面に配置されます。
  • 赤色のボックス（z-index: 2）は黄色の上に重なって表示されます。
  • 緑色のボックス（z-index: 3）が最も前面に表示され、他の2つのボックスの上に重なります。

注意点

z-indexを指定しても効果がない場合は、対象の要素にpositionプロパティが設定されているか確認してください。static（初期値）の状態ではz-indexは機能しません。また、負の値を指定することで、親要素や他の要素の背後に要素を配置することも可能です。

  1. CSSだけでメニューアイコン（ハンバーガーメニュー）を作成する方法

    CSSだけを使えば、画像ファイルに頼らずに、スマートフォンサイトなどでよく見かける「メニューアイコン」（三本線のハンバーガーアイコン）を簡単に作成できます。仕組みはとてもシンプルで、横長の長方形（バー）を3つ縦に並べるだけです。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {   width:

  2. CSSのclip-pathプロパティで三角形を作成する方法

    三角形は、CSSのclip-pathプロパティを使うことで簡単に作成できます。画像ファイルやSVGに頼らず、純粋なCSSだけで図形を描画できるため、軽量で柔軟なデザイン表現が可能になります。 clip-pathプロパティとは clip-pathプロパティは、要素の表示範囲を切り抜く（クリッピングする）ためのプロパティです。特にpolygon()関数を使用すると、複数の座標点を指定することで任意の多角形を自由に描くことができます。 構文 CSS clip-pathプロパティの基本構文は以下のとおりです。 Selector {     clip-path: