我必须在两个不同的(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,它位于bodyhtml元素后面。您的事件可能被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>

10-05 21:06
查看更多