背景图片不允许我将光标放在文本字段中
background image won't let me place cursor in text field
我的背景中有一张图片,它在我的表格后面。结果它不允许我将光标放在文本字段内。
https://jsfiddle.net/RE006/4rat11xc/1/
HTML:
<div id = "navButton">☰ Menu</div>
<div class="topnav" id="topNav">
<a href = "#" id= "closebtn">×</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;
}
您可以通过两种方式解决此特定问题:
#cup { z-index: -1; }
/* or */
#registration_form { position: relative; }
发生这种情况的原因是表单仍然是 position: static
。具有静态位置的元素不受 top
和 z-index
等定位属性的影响,因此页面上其他非静态元素基本上位于不同的 "plan of existence"(可能有更好的技术术语为此)。
将 #cup
显式更改为在后面将解决此问题。当您将表单更改为 relative
时,它移动到与非静态元素相同的 "plane of existence" 中,因此根据其在 DOM 中的位置(在 #cup
).
我的背景中有一张图片,它在我的表格后面。结果它不允许我将光标放在文本字段内。
https://jsfiddle.net/RE006/4rat11xc/1/
HTML:
<div id = "navButton">☰ Menu</div>
<div class="topnav" id="topNav">
<a href = "#" id= "closebtn">×</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;
}
您可以通过两种方式解决此特定问题:
#cup { z-index: -1; }
/* or */
#registration_form { position: relative; }
发生这种情况的原因是表单仍然是 position: static
。具有静态位置的元素不受 top
和 z-index
等定位属性的影响,因此页面上其他非静态元素基本上位于不同的 "plan of existence"(可能有更好的技术术语为此)。
将 #cup
显式更改为在后面将解决此问题。当您将表单更改为 relative
时,它移动到与非静态元素相同的 "plane of existence" 中,因此根据其在 DOM 中的位置(在 #cup
).