背景图像不允许我将光标放在文本字段中

Question

我在背景中有一个图像，它在我的表单后面。 因此，它不允许我将光标放在文本字段中。

https://jsfiddle.net/RE006/4rat11xc/1/

.HTML：

<div id = "navButton">&#9776; Menu</div>
<div class="topnav" id="topNav">
<a href = "#" id= "closebtn">&times;</a>  
<a href=#>Home</a>
<a href="#">Drinks</a>
<a href="#">Food Menu</a>
<a href="#">Contact</a>
</div>
<div>
<header>
<h1>Header</h1> 
</header>
<div class= "container">
<main> 
<div id="cup"></div>
<form action="registration.html" method="get" name="registration_form" id="registration_form">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name">
<span>*</span><br>
</form>
</main>
<!-- end .container --></div>
</div><!--end of pushDown id-->
</body>

.CSS：

label, input, select {
margin: 10px 0px;
z-index: 9997;
}
/* cup image background */
#cup { 
background-image: url(images/cup.png);
background-repeat: no-repeat;
background-size: contain;
content:'';
filter: alpha(opacity=5); /* For IE8 and earlier */
height: 400px;
left: 20%;
opacity: 0.5;
position: absolute;
top: 100px;
width: 200px;
}

https://jsfiddle.net/RE006/4rat11xc/

Answer 1

您可以通过两种方式解决此特定问题：

#cup { z-index: -1; }
/* or */
#registration_form { position: relative; }

发生这种情况的原因是 表格仍然position: static.具有位置静态的元素不受定位属性(如top和z-index(的影响，因此页面上其他非静态元素基本上处于不同的"存在计划"上(可能有更好的技术术语(。

将#cup更改为显式位于后面将解决此问题。当你将形式更改为relative时，它会移动到与非静态元素相同的"存在平面"中，因此根据它在 DOM 中的位置(在#cup的顶部(进行堆叠。