CodeGym /コース /Frontend SELF JA /重ね合わせコンテキスト

重ね合わせコンテキスト

Frontend SELF JA

レベル 21 , レッスン 1

使用可能

2.1 z-indexプロパティ

CSSの重ね合わせコンテキストはz-indexプロパティによって管理されていて、Z軸（スクリーンに垂直な第三の座標）に沿って要素がどのように重なり合うかを決定します。z-indexと重ね合わせコンテキストを理解して正しく使うと、複雑で動的なレイアウトを作成できるようになります。

重ね合わせコンテキストの基本

重ね合わせコンテキストは、要素がどのように互いに重なり合って表示されるかを決定します。ウェブページ上の各要素には重ね合わせのレベルがあり、z-indexプロパティを使って変更できます。

重ね合わせのルール

ドキュメントツリー内の位置: ドキュメントツリーで下にある要素が、上にある要素の上に重なります。
プロパティ z-index: より大きなz-indexの値を持つ要素が、より小さなz-indexの値を持つ要素の上に重なります。

z-indexの基本

z-indexプロパティは、要素が互いに重なった際の表示順序を決定します。より大きなz-index値を持つ要素が、より小さな値を持つ要素の上に表示されます。z-indexは、position: relative, absolute, fixed, またはstickyのいずれかの位置付けが設定された要素にのみ適用されます。

シンタックス:

    
      .element {
        position: relative; /* または absolute, fixed, sticky */
        z-index: number;
      }

どこに：

number: 整数で、正または負の数値を取ることができます。値が大きいほど、要素の重ね合わせ順序が上になります

z-indexの使用例:

この例では、Box 2がz-index: 2;を持っているため、Box 1とBox 3の上に表示され、Box 1はBox 3の上に表示されます。

CSS

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }

HTML

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>

2.2 重ね合わせコンテキスト (stacking context)

重ね合わせコンテキストは、重ね合わせ順序を決定する際にひとまとまりとして扱われる要素のグループです。特定の条件が達成されたときに、例えば位置付けとともにz-indexを設定したり、他のCSSプロパティを持っていたりすると、重ね合わせコンテキストが作成されます。

重ね合わせコンテキストの作成

重ね合わせコンテキストは次の場合に作成されます:

要素がrelative, absolute, fixedまたはstickyの位置付けを持ち、z-indexがautoでない場合。
要素がopacityプロパティで1未満の値を持っている場合。
要素がtransform, filter, perspective, clip-path, maskまたはmask-imageプロパティでデフォルト値以外を持っている場合。
要素がcontainプロパティでlayout, paint, またはstrictを持っている場合。

重ね合わせコンテキストの作成例:

CSS

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }

HTML

    
      <div class="parent">
        親要素
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>

コードの説明:

.parent: position: relative;とz-index: 10;を持つ要素で、新しい重ね合わせコンテキストを作成します
.child-blue: position: absolute;とz-index: 1;を持ち、親要素によって作成された新しい重ね合わせコンテキスト内にあります
.child-red: position: absolute;とz-index: 2;を持ち、同じく親要素によって作成された新しい重ね合わせコンテキスト内にあり、.child-blueの上に配置されます

2.3 重ね合わせコンテキストの相互作用

ある重ね合わせコンテキスト内の要素は、他の重ね合わせコンテキストの要素に重ねることはできません。ただし、コンテキストの順序自体を変える場合は別です。これは、ある重ね合わせコンテキスト内でより高いz-indexの値を持つ要素は、常に同じコンテキスト内でより低いz-indexの要素の上に表示されることを意味します。

重ね合わせコンテキストの相互作用例:

CSS

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

HTML

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>

この例では、.container2はz-index: 20;を持っているので、.container1（z-index: 10;）の上に表示されます。それぞれのコンテナ内の要素は、自らのz-indexに従って配置されますが、他のコンテナの要素とは重ならないです。

2.4 z-indexの負の値

z-indexは負の値を取ることができ、これにより要素をz-indexが0または正の値を持つ他の要素より下に配置することができます。

CSS

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }

HTML

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>

コードの説明:

.box1: z-index: -1;を持つ要素で、z-index: 0;を持つ要素の下に配置されます

z-indexの使用に関するヒント:

z-indexの使用を最小限にする: 本当に必要な場合にのみz-indexを使用するようにしよう。これにより、複雑で混乱した重ね合わせ構造を避けることができます
意識的に重ね合わせコンテキストを作ろう: 新しい重ね合わせコンテキストを作成することで、要素の重ね合わせを管理できますが、ドキュメントの構造を複雑にすることもあります
セマンティックに意味のあるz-indexの値を使おう: z-indexに意味のある値を割り当て、高位の要素には正の値を、低位の要素には負の値を使用するよう心がけよう

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION