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

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

这是我的代码：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>正常工作，我感到困惑吗？

最佳答案

您的.big-bubbles元素显示在.test-continer表单的顶部。这意味着您正在单击.big-bubbles元素，而不是在表单控件中。

您可以通过赋予.test-continer元素一个相对位置和一个大于z-index的1（这是z-index元素上的.big-bubbles）来解决此问题：

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

Modified Codepen demo。