z-indexが効かない

Question

擬似要素を使うことにより背景画像を透過しましたがz-index　2が効かず、下の画像のようにpも薄くなってしまいます。

<!-- ギャラリー -->
    <article class="gal">
        <h1 class="title gal-title">Gallery</h1>
        <div class="gal-container">
        <div class="gal-text">
          <h2>Art Gallery</h2>
            <div class="gal-sentence">
                <h4>Eyes on our eyes</h4>
                                <p>Behavior as if it were necessary to do so.</p>
                                <p>I don't care about that, everyone swallows a star tattoo on her neck.</p>
                                <p>Is it okay? This is Xintiandi</p>
                                <p>I don't need a fleeting dream. Everything is as you wish.</p>
            </div>
        </div></div>
    </article>

* ギャラリー */
main .gal {
    padding: 80px 0;
    
}
main .gal-container {
    background-image: url(../images/main_03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
    background-position: center center;
    width: 100%;
    height: 400px;
    margin-top: 80px;
    padding-top: 100px;
    position: relative;
    z-index: 1;
}
main .gal-container::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.6);
    
}
main .gal-container h2 {
    text-align: center;
    position: relative;
    font-size: 1.8rem;
    font-weight: 800;
    z-index: 2;
}
main .gal-container h2::before,
main .gal-container h2::after {
    content: "";
    background-color: black;
    display: inline-block;
    content: "";
    vertical-align: 5px;
    width: 32px;
    height: 2px;
}
main .gal .gal-text {
    z-index: 2;
}
main .gal .gal-sentence p {
    z-index: 2;
}

main .gal-container h2::before {
    margin-right: 8px;
}
main .gal-container h2::after {
    margin-left: 8px;
}

ためしたこと…文章全体を囲む要素とp単体にz-index 2を指定してみましたがやはり効きませんでした。
もし分かる方がいらっしゃればご教授願いたいです。

Answer 1

下記のように position: relative;を追加してください。

main .gal .gal-text {
    position: relative; /* 追加 */
 
    z-index: 2;
}

CSSでz-indexが効かない時の4つの原因とその対応方法 | コリス

Comments

[momoka-]

解決しました！ありがとうございます！！