擬似クラスで要素を重ねるとz-indexが無視されてしまう

Question

divで設定した要素に、背景としてストライプの要素を下に重ねたく
擬似クラス::afterを使ってコーディングしたところ、
z-indexの順番が効かず、親要素(.item)の上に重なってしまいます。

理想の重なり順は
上　<div class="item">
中 擬似要素
下　<div class="bg">
なのですが、どなたか解決方法ご存知でしたら、教えていただきたいです。

該当のソースコード

<div class="bg">
    <div class="item">
        <p>テキスト</p>
        <a href="#">クリック</a>
    </div>
</div>

.bg {
    height: 500px;
    background: #FFFAF0;   
}

.item {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #333;
    border-radius: 10px;
    z-index: 100;
    background-color: #fff;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 0;
        background-size: auto auto;
        background-color: rgba(255, 255, 255, 1);
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(103, 207, 240, 1) 8px, rgba(103, 207, 240, 1) 16px );
        -webkit-transform: translate(10px,10px);
        transform: translate(10px,10px);
        border-radius: 20px;
        pointer-events : none;
    }
}

試したこと

.itemのz-indexを削除し、
::after要素のz-indexを-1にしたところ、重なりのエラーは解消されましたが
親要素(.bg)の背景の下になってしまうため、見えません。

これは、親要素に position:relative, z-index:-2　を指定することで見栄えは解消しましたが
次は要素内に入れたリンクボタンがクリックできなくなります。

.itemに直接背景を入れては？というご指摘がありましたが、
.itemと.bgは異なる背景にしたいためこのような記述としています。

Comments

[Lhankor_Mhy]

「親要素の背景の下になってしまうため、見えません。」とのことですが、この「親要素」とは.itemのことですか？

[mai1210]

こんにちは。
.item　に背景を付けるのではなく、疑似要素にしたい理由を伺っても良いですか？

単純にこれではダメなのでしょうか・・・

.item {
width: 300px;
height: 200px;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(103, 207, 240, 1) 8px, rgba(103, 207, 240, 1) 16px );
-webkit-transform: translate(10px,10px);
transform: translate(10px,10px);
border-radius: 20px;
}

[mari.rinn]

すみません、一旦書いたのですが、リンクのクリックが出来るかどうかは試してないのでわからないため、内容を取り消しとさせて頂きましたのでこの書き込みは無視してください。すみません。

[patsuco]

@Lhankor_Mhy様
>この「親要素」とは.itemのことですか？
こちらは.bgのことになります。わかりづらく、申し訳ございません。修正いたします。

[patsuco]

@mai1210様
.bgの背景と.itemの背景は違うものにしたいのです(cssに記述漏れていたので追加いたします。)

また、ご指摘いただいた記述では擬似要素が.itemの上にきてしまうようです。

[Lhankor_Mhy]

> こちらは.bgのことになります。

では、「::after要素のz-indexを-1にしたところ、重なりのエラーは解消されましたが親要素(.bg)の背景の下になってしまうため、見えません。」という問題が再現しませんでした。

https://jsfiddle.net/Lhankor_Mhy/z9xaujpk/

おそらく、ご提示いただいていない部分に原因があると思われます。
問題が再現するコードをご提示ください。

[hatena19]

backgroud-color: #fff;
がタイポという落ちではないのかな？
background-color: #fff;

[Lhankor_Mhy]

↑それを修正しても問題が再現しないのですが、問題が共有される前に自己解決したようなので、なんだかよくわからないけどめでたしめでたし。

[mai1210]

ちょっとズレた影（？）みたいに入れたかったんですね。やりたい事が今やっとわかりました。
何にせよ解決したようなので良かったです。

Answer 1

.itemで再現したかったbackground:#fffを
新たな擬似クラス::beforeにて定義し、
z-indexで重なりを調整することで解決できました。
pointer-events : none;が鍵でした。
みなさまご回答いただき、ありがとうございます。

重ね順
↑
・.item
・::before
・::after
・.bg
↓

<div class="bg">
    <div class="item">
        <p>テキスト</p>
        <a href="#">クリック</a>
    </div>
</div>

.bg {
    height: 500px;
    background: #FFFAF0;   
}

.item {
    position: relative;
    width: 300px;
    height: 200px;

    border-radius: 10px;
    z-index: 100;
    background-color: #fff;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 0;
        z-index: -1;
        background-size: auto auto;
        background-color: #fff;
        border: 1px solid #333;
        border-radius: 10px;
        pointer-events : none;
    }
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 0;
        z-index: -2;
        background-size: auto auto;
        background-color: #fff;
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(103, 207, 240, 1) 8px, rgba(103, 207, 240, 1) 16px );
        -webkit-transform: translate(10px,10px);
        transform: translate(10px,10px);
        border-radius: 20px;
        pointer-events : none;
    }
}

Answer 2

追記　始めに画像が見たかった…

回答　同じ親を持つ子要素に、同じようにポジションを設定する

すみません、itemに直接backgroundではダメなんでしょうか？
試されたことをこちらで再現しながら追ってみましたが、
ずれていること以外は差異が無いような気がします。
もしかしてずれがポイントだったりしますか？

と、たずねつつ検証した結果、pとaに以下のCSSでいけそうです。

  p , a {
    position: relative;
  }

以下蛇足です。

検証したり飯食ったり洗濯物を干してる間に同じことを言ってる人がっ
みんな考えることは同じだね～

Comments

[退会済みユーザー]

コンパクト版　ちょっとストライプが荒いけども。
<style >
body {
background: aliceblue;
}

.outside {
position: relative;
background: white;
width: 100%;
max-width: 300px;
border: 1px solid;
border-radius: 10px;
padding: 30px;
}

.outside::before {
content: "";
position: absolute;
background: linear-gradient(45deg, white 25%, orange 50%,white 75%, orange 100%);
background-size: 6px 6px;
top: 8px;
left: 8px;
width: 100%;
height: 100%;
border-radius: 10px;
z-index: -1;
}
</style>

<body>
<div class="outside">
<div class="inside">
<p>ちゃれんじ</p>
<a href="#link">どうなることかとおもった</a>
</div>
</div>
</body>