下にある要素はクリックできません

Question

2つの要素を2つの異なる（ブートストラップの）行にレンダリングする必要があります。下位の要素は最前面の後ろに配置する必要があります。基本的なものがポインタイベントをキャッチしていない理由を理解できません。

.smaller-square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow 
 
} 
 

 
.bigger-square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green 
 
} 
 

 
.overlay { 
 
    z-index: 0; 
 
} 
 

 
.underlay { 
 
    z-index: -1; 
 
    position: relative; 
 
    top: -5px; 
 
    left: 0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row overlay"> 
 
    <div class="smaller-square" onclick="alert('yellow');"> 
 
    </div> 
 
    </div> 
 
    <div class="row underlay"> 
 
    <div class="bigger-square" onclick="alert('green');"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはbodyとhtml要素の後ろにそれを置く緑の上z-index: -1を持っているからです。あなたのイベントはおそらくbodyによってキャプチャされています。ラッパーを追加してz-indexを設定するか、z-indexをコンテナに適用してみてください。

.smaller-square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow 
 
} 
 

 
.bigger-square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green 
 
} 
 

 
.overlay { 
 
    z-index: 0; 
 
} 
 

 
.underlay { 
 
    z-index: -1; 
 
    position: relative; 
 
    top: -5px; 
 
    left: 0px; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    z-index: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row overlay"> 
 
    <div class="smaller-square" onclick="alert('yellow');"> 
 
    </div> 
 
    </div> 
 
    <div class="row underlay"> 
 
    <div class="bigger-square" onclick="alert('green');"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたがz-indexプロパティを宣言することにより、それにスタッキングコンテキストを適用することができるように含む要素.containerにposition: relativeを宣言します。それはstaticない絶対（絶対&固定）または関連して配置されていると言うことです - それは、「配置要素」ではありませんので、

は、あなたも、兄弟要素.overlayで宣言z-indexプロパティを必要としません。したがってz-indexは適用されません。

.smaller-square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow 
 
} 
 

 
.bigger-square { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green 
 
} 
 

 
.overlay { 
 
/* redundant unless you declare a position property for this element 
 
    that is not "static" - which is the default positioning for any element */ 
 
    z-index: 0; 
 
} 
 

 
.underlay { 
 
    z-index: -1; 
 
    position: relative; 
 
    top: -5px; 
 
    left: 0px; 
 
} 
 

 

 
/* Additional */ 
 

 
.container { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row overlay"> 
 
    <div class="smaller-square" onclick="alert('yellow');"> 
 
    </div> 
 
    </div> 
 
    <div class="row underlay"> 
 
    <div class="bigger-square" onclick="alert('green');"> 
 
    </div> 
 
    </div> 
 
</div>