z-index:疑似要素の要素の重なりについて教えてください。

Question

●実現したいこと
添付画像のように<h1>をh1の疑似要素より前面に配置したい

●わからないこと
疑似要素にz-index:-1;をつけることで最背面に配置されると思っていましたが、h1にもz-indexを記述しなければ疑似要素が表示されません。理由がわからないので教えていただきたいです。

<div class="container">
 <h1>見出し</h1>
</div>

.container {
width: 475px;
margin: 139px 137px 212px 138px;
background-color: #FFFFFF;
}

h1 {
    width: 215px;
    height: 36px;
    padding:0 9px 5px 10px;
    position: relative;
    z-index: 1;
}

.h1:after {
    content: '';
    position: absolute;
    top: 16px;
    left: 0px;
    display: block;

    width:100%;
    height:20px;
    background: repeating-linear-gradient(-45deg, #7385E9 0,#7385E9 10px, rgb(194, 202, 243) 10px,rgb(194, 202, 243) 20px);
    z-index: -1;
}

Comments

[yoshinavi]

キャッシュクリアしていますか？

[退会済みユーザー]

キャッシュクリアしてみましたが同じ結果でした…

Answer 1

質問者さんと最初は違い、他の回答者さんと同じような表示でしたが、先程、再度確認したら、状況が再現されました。

z-indexの重なり順はいくつかの条件があります。

MDN：重ね合わせコンテキスト

今回は、親の「.container」が、ちょっとした状況等により、絡んでます。
どちらか一方に設定するよりは、対象要素にはz-indexを設定したほうが無難です。

Comments

[退会済みユーザー]

何度も確認していただきありがとうございました。理解できました。

Answer 2

.h1:after {
    content: '';
    position: absolute;
    top: 16px;
    left: 0px;
    display: block;
    width:100%;
    height:20px;
    background: repeating-linear-gradient(-45deg, #7385E9 0,#7385E9 10px, rgb(194, 202, 243) 10px,rgb(194, 202, 243) 20px);
    z-index: -1;
}

上記の最初の（.）を消したら疑似要素側だけで良いかと思います。
もしならなければ他のどこかが影響してるのかと思います。

Comments

[退会済みユーザー]

ドット(.)はミスタイプでした。ややこしくすいません。ほかの影響も考えてみます。ありがとうございました。

[mutsuki22]

それは（.）は元々付いてなくて上記のコードでは上手くいかないって事ですか？

[退会済みユーザー]

はい。ドットはもともとついていません。ドットなしで確認しましたが表示されません。

Answer 3

.h1の意味がわかりませんでしたがz-index: 1;を指定しなくてもできました。
CodePen

追記

やはり問題があるようには思えません。

強いて言うなら.h1とh1のタイプミス？

Comments

[退会済みユーザー]

ご回答ありがとうございます。私のブラウザではなぜか文字のみ表示されストライプは隠れてしまいます、。通常であればz-indexは疑似要素に対する記述のみで再現できるということでしょうか。

[kyoya0819]

.h1ではなくh1では？

[退会済みユーザー]

ドット(.)はミスタイプでした。ややこしくすいません。
今回の質問には記載していませんでしたが、今回の見出し、container要素の中に記述しているもので、おそらく
.container {
width: 475px;
margin: 139px 137px 212px 138px;
background-color: #FFFFFF;
}
が関係していると考えました。この場合、重なり順としては上から1)h1要素の「見出し」　2)container要素　3)疑似要素のストライプの順になっているためストライプが隠れてしまったのでしょうか。containerはpositionを指定していないため重なり順としてはz-indexを指定した要素と比べどのように考えるべきか教えてください。

[yoshinavi]

横からスミマセン。

＞私のブラウザではなぜか文字のみ表示されストライプは隠れてしまいます、。

→　ブラウザ名とバージョンは何ですか？
また、提示のコードでは、ストライプ部分は「.h」なので、HTMLに無いので、表示されないのは正常です。

[退会済みユーザー]

ブラウザはGoogle chrome、バージョンは 75.0.3770.142です。

[kyoya0819]

Keito37さん
Container要素とは？クラス名でないのですか？
HTMLですが親要素まで全て記載（修正）してください。

[退会済みユーザー]

何度も申し訳ありません。
質問のhtml,cssを修正しました。宜しくお願い致します。