javascript - 输入标签无法使用鼠标聚焦

Question

我正在添加一些背景样式，但问题是我无法使用鼠标选择输入标签和按钮，因此问题在添加样式后出现。

这是我的代码:Input tags not working

<div class="bla">

  <div class="test-continer">
    <span>Problem: Input tags, Buttons and link tags are <b>not working</b></span>
    <h4>when "test-continer" div ,  h4 (header) and above span is removed its working!</h4>
    <input id = "input" type="text">
    <button id = "button" onClick = "check()" >Submit</button>
    <a href="http://codepen.io/dannibla" class= "article"><strong>What makes this problem ?</strong></a>
  </div>

</div>

当 <div class="test-continer"> , <h4>和 <span>然后删除了<input>工作正常，我很困惑？

Answer 1

您的 .big-bubbles 元素出现在您的 .test-continer 表单的顶部。这意味着您点击的是 .big-bubbles 元素，而不是在您的表单控件内。

你可以通过给你的 .test-continer 元素一个相对位置和一个大于 1 的 z-index 来解决这个问题(这是.big-bubbles 元素上的 z-index:

.test-continer {
  position: relative;
  z-index: 2;
}

Modified Codepen demo .