[Q&A] z-indexで重なり部分を調節したいのですが、効きません

z-indexで重なり部分を調節したいのですが、効きません

解決したいこと

現在ウェブサイトを作成しており、画像を最前面に配置したいと考えているのですが、z-indexを指定しても反応がなく詰まってしまっています。

該当箇所

.html

        <div class="layer">
            <div class="snsTitle paragraphRight">
                <h3>- SNS <i class="fa-solid fa-tv"></i></h3>
            </div>
            <div class="Area">
                <div class="Thumbnail">
                    <a href="#" target="_blank"><img src="../static/image/ai_image_generator_01.webp"></a>
                </div>
                <div class="linkParagraph">
                    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
                </div>
            </div>

            <div class="Area">
                <div class="Thumbnail thumbnailRight">
                    <a href="#" target="_blank"><img src="../static/image/797.png"></a>
                </div>
                <div class="linkParagraph">
                    <p>aaaaaaaaaaaaaaaaaa</p>
                </div>
            </div>

            <div class="designArea center"></div>
        </div>

.css

.Area{
    width: 100%;
    z-index: 10000;
}

.Thumbnail img{
    width: 800px;
}

.thumbnailRight{
    float: right;
}

.designArea{
    width: 900px;
    height: 500px;
    background-color: #FEDFE1;
    opacity: 0.5;
}

.center{
    margin: -250px auto;
}

codepen

上記コードのように記載しているのですがz-indexが機能せず、詰まってしまっています。
何かご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。

2Answer

@amate posted at 2024-07-01

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

位置指定なしの要素（下記の例の DIV #4）の opacity の値を変更すると、その要素の背景と境界が、浮動要素や位置指定要素の上に飛び出し、おかしな結果になります。

ここら辺の話っぽいね

.designArea {
  width: 900px;
  height: 500px;
  background-color: #FEDFE1;
  opacity: 0.5;
  z-index: -1;
  position: relative;

これで画像が上に表示されるのは確認した

2Like

@changkejun posted at 2024-07-01

z-indexは、「位置指定されたボックス（つまりstatic 以外のもの）」の要求があります。
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
そして、CSSは以下のように修正すればいけます。

.Area{
    position : relative;
    width: 100%;
    z-index: 10000;
}