我必须在两个不同的(bootstrap的)行中呈现两个元素,最下面的必须在最上面的后面。我不明白为什么底层不捕捉指针事件。
.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>
最佳答案
这是因为在绿色元素上有一个z-index: -1
,它位于body
和html
元素后面。您的事件可能被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>