Question

我的背景中有一张图片，它位于我的表格背后。因此，它不允许我将光标放在文本字段中。

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

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

position: static

发生这种情况的原因是因为表单仍然是top。具有位置静态的元素不受z-index和#cup等定位属性的影响，因此页面上非静态的其他元素基本上处于不同的存在计划中。（这可能是一个更好的技术术语）。

将relative更改为明确显示在后面将解决此问题。当您将表单更改为#cup时，它会移动到相同的存在平面＆＃34;作为非静态元素，因此根据它在DOM中的位置（在{"name":name1","type":"type1"}之上）进行堆叠。

背景图片不会让我把光标放在文本字段中

1 个答案: