負のZ-インデックスを持つ要素のクリックイベント

Question

部分的に透明な背景を持つ親要素があります。この要素の内部に子要素があります。そして、親要素の背景に子要素を表示する必要があるので、子要素にz-index：-1を設定します。ここで

はcodepen例です：https://codepen.io/anon/pen/xpVbPa

灰色の四角は、子要素です。私はそれをクリックして処理する必要があります。どうやってするの？親要素にpointer events: noneを設定しようとしましたが、動作しません。

Answer 1

バックグラウンドの疑似要素を使用し、pointer-events: noneを追加します。

Codepen

function childClick() { 
 
    alert('click!'); 
 
}

.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    padding: 50px; 
 
    position: relative; 
 
} 
 

 
.parent:after { 
 
    content: ''; 
 
    background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    pointer-events: none; 
 
} 
 

 
.child { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: gray; 
 
    cursor: pointer; 
 
    position: absolute; 
 
}

<div class="parent"> 
 
    <div class="child" onclick="childClick()"></div> 
 
</div>

Answer 2

あなたのCSSを更新します。子供のdivの:after

.child:after{ 
    width: 150px; 
    height: 150px; 
    background-color: gray; 
    position: absolute; 
    cursor: pointer; 
    content:""; 
    z-index: -1; 
} 
.child { 
    width: 150px; 
    height: 150px; 
} 

Answer 3

に設定した背景には、このタイプの問題を解決する上での原則は.childの親の背景を持つが、兄弟にされていません。

function childClick() { 
 
    alert('click!'); 
 
}

.parent { 
 
    position:relative; 
 
} 
 
.frontground { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    padding: 50px; 
 
    pointer-events: none; 
 
    position: relative; 
 
    background: url(https://image.ibb.co/fAYr5R/585e4ad1cb11b227491c3391.png) 
 
} 
 
.child { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: gray; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    margin: 50px; 
 
}

<div class="parent"> 
 
    <div class="child" onclick="childClick()"></div> 
 
    <div class="frontground"></div> 
 
</div>

あなたの場合、兄弟は実際には擬似要素ですが、必ずしもそうではないかもしれません。