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

CSSで要素を重ねる方法｜z-indexプロパティの使い方を解説

Webページ上で複数の要素を重ねて表示したい場合には、CSSのz-indexプロパティを使用します。z-indexは、重なり合う要素の前後関係（スタッキング順序）を数値で制御できるプロパティです。

z-indexの基本的な仕組み

z-indexの値が大きい要素ほど手前に表示され、値が小さい（または負の）要素ほど奥に配置されます。例えば、z-index: -1を指定すると、その要素はテキストなどの他のコンテンツの背面に回り込みます。

注意点： z-indexは、positionプロパティが relative、absolute、fixed、sticky のいずれかに設定されている要素にのみ有効です。static（初期値）の状態では機能しないため、必ずposition指定と組み合わせて使用しましょう。

実装例：画像をテキストの背後に配置する

以下のコードでは、画像を絶対位置で左上に配置し、z-index: -1 を指定することで、テキストの背面に画像を表示しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" width="300" height="250">
  <p>これはデモ用のテキストです。</p>
</body>
</html>

コードのポイント解説

  • position: absolute; … 画像を通常の文書フローから外し、ページの左上（left: 0px、top: 0px）を基準に配置します。
  • z-index: -1; … 負の値を指定することで、画像がテキストよりも奥（背面）に表示されます。
  • この結果、テキストが画像の上に重なって表示され、背景画像のような演出が可能になります。

このようにz-indexを活用することで、バナー画像の上にキャッチコピーを載せたり、背景に装飾画像を配置したりするなど、表現の幅が大きく広がります。ぜひ実際にコードを実行して、表示の変化を確認してみてください。

  1. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ