单击父div不适用于Firefox（z-index？）

Question

我想检测特定div上的点击。在Safari和Google Chrome中，它的工作原理很吸引人，但不幸的是，在Firefox：/中却没有。 z-index也不起作用。输入字段可以在背景中，但是应该可见。

$('.def').click(function() {
  alert('click');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.demo {
  width: 50%;
  margin: 0 auto;
  margin-top: 50px;
}

.def {
  background-color: blue;
}

input {
  height: 25px;
  background-color: red;
  width: 100%;
  z-index: -1; /* doesn't work either */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <div class="abc">
    <div class="def">
      <input type="text" disabled>
    </div>
  </div>
</div>

Answer 1

输入也应该是position: relative。

z-index仅适用于定位的元素（position：绝对，位置：相对，位置：固定或位置：粘性）。

$('.def').click(function() {
  alert('click');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.demo {
  width: 50%;
  margin: 0 auto;
  margin-top: 50px;
}

.def {
  background-color: blue;
}

input {
  height: 25px;
  background-color: red;
  width: 100%;
  position: relative;
  z-index: -1;
  /* doesn't work */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <div class="abc">
    <div class="def">
      <input type="text" disabled>
    </div>
  </div>
</div>