親要素のz-index: -1;を変えずに子要素の優先順位を上げる方法はありますでしょうか？

Question

前提・実現したいこと

親要素のz-index: -1;を変えずに、子要素の優先順位を上げて、子要素のホバー時のテキスト表示をさせたいです。

.section3 {
    display: table;
    width: 100%;
    height: 1300px;
    background-color: rgba(61, 187, 245, 0.527);
    transform: skewY(-10deg);
    margin-top: 10vw;
    position: relative;
    z-index: -1; //←ここ

    & > * {
        transform: skewY(10deg);
    }
}

.skill_content {
        text-align: center;
        

        
        & .square {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            line-height: 200px;
            margin: 0 auto 20px auto;
            cursor: pointer;
            transition: all 0.6s;         

            &:hover + .level {  //←親要素のz-index:-1;を変えずにこのホバーを効かせたい。
                opacity: 1;
                transform: scale(1.2);
            }
        }      
}

<section class="content section3" id="skill">
            <div class="skill_wrapper">
                <h2>skill</h2>
            </div>
            <div class="skill_contents">
                <div class="skill_content">
                    <div class="square js">JavaScript</div>
                    <p class="level">
                        Progate、dotinstall、udemyのCSSとJavaScriptコースを終了程度のスキル。<br>
                        あまり得意ではないですが、嫌いではないのでたくさんコードを見て、今後さらに精進していきます。
                    </p>
                </div>
                <div class="skill_content">
                    <div class="square html">HTML5</div>
                    <p class="level">
                        Progate、dotinstall、udemyのcssとJavaScript、模写を2つ程度のスキル。<br>
                        今後さらに精進していきます。
                    </p>
                </div>
                <div class="skill_content">
                    <div class="square css">CSS3</div>
                    <p class="level">
                        Progate、dotinstall、udemyのcssとJavaScript、模写を2つ程度のスキル。<br>
                        模写も今後どんどん行ってレベルアップを図っていきます。                    　　
                    </p>
                </div>
            </div>
        </section>

試したこと

子要素.squareに「position: relative; z-index: 2;」を入れましたが、うまくいきませんでした。
ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

z-index: -1;によってbody要素の下に .section3 が潜り、body要素が.section3を覆ってしまうことになり、ホバーが効かなくなります。

子要素.squareに「position: relative; z-index: 2;」を設定しても、子要素は親要素を超えて移動することはできないのでbody要素の前面に移動することはできません。
下記の「4. 子要素のz-indexレベルを制限する親要素」の項目を参照してください。

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

.section3 に z-index: -1; を設定している目的が分かりませんので、解決策として適切かどうかは分かりませんが、とりあえずの解決策は、body要素のz-indexを.section3より下げることです。

body {
  position: relative;
  z-index: -2;
}

Comments

[whitehorse85921]

hatena19さん、ありがとうございます。
section3がbodyの下にz-index: -1;によってもぐりこんでいたんですね。
助かりました。