z-indexについて

やりたいこと

.sectionの背景を設定して.section__itemにグラデーションの影.shadowを設定したい。

なにも設定しないと.shadowが一番上に来てしまう。
.section__itemにbox-shadowをつければ出来るかと思ったがグラデーションの仕方が分からなかったので断念。
shadowにz-index:-1をつけてみたが.sectionの背景の下に来てしまうのでうまくいかない。
そこでchatGPT先生にやり方を聞いて解決しましたので備忘のため残します。

    <section class="section">
        <div class="section__item">
          <div class="shadow"></div>
          <div class="section-item__picture">
            <p class="section-item__title"></p>
            <p class="section-item__name"></p>
          </div>
          <div class="section-item__discription">
            <p class="section-item-discription__text"></p>
          </div>
        </div>
    </section>

解決方法

.section__item {
  position: relative;
  z-index: 1;
}

.shadow {
  position: absolute;
  bottom: -10px;
  right: -15px;
  z-index: -1; /* 重なり順を下にする */
}

.section {
  background-image: url("your-background-image.jpg");
  position: relative;
  z-index: 0;
}

まず、.section__item要素にposition: relative;とz-index: 1;を設定することで、この要素が重なっている他の要素の基準位置となり、その上に重なっている要素のz-index値を比較することができるようになります。

次に、.shadow要素にposition: absolute;、bottom: -10px;、right: -15px;、z-index: -1;を設定することで、親要素である.section__item要素の下に表示され、かつ、z-index値が負の数であるため、他の要素よりも下に表示されるようになります。

そして、.section要素にposition: relative;、z-index: 0;を設定することで、.shadow要素が.section要素の背景画像よりも上に表示されるようになります。.section要素はsection全体を表す要素であり、通常、最も下の要素であるため、z-index値を0に設定することで、.shadow要素のz-index値が大きくなり、背景画像よりも上に表示されるようになります。

以上の設定により、.shadow要素が.section-item__pictureとsection-item__discriptionの要素の下に表示され、かつ、背景画像よりも上に表示されるようになります。

CSSでは、親子関係や兄弟関係など、要素同士の関係性をうまく利用することで、重なり順を調整することができます。また、positionプロパティとz-indexプロパティを組み合わせることで、要素の重なり順を調整することができます。

(以上chatGPT先生のお言葉でした）