Html 无法输入 <input> 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18424672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't Type in <input> tags
提问by user2714604
I'm currently trying to create a form on my website's front page. However, Im having issues being able to type within the input boxes. In absolute positioning, the cursor doesn't show up. When I change the positioning from absolute to relative, I no longer have this issue. Unfortunately, when I do this, it moves all my other elements down. Is there a way around this so the tag doesn't move my other elements down, along with being able to type into this input boxes?
我目前正在尝试在我网站的首页上创建一个表单。但是，我在输入框中输入时遇到了问题。在绝对定位中，光标不显示。当我将定位从绝对更改为相对时，我不再有这个问题。不幸的是，当我这样做时，它会将我的所有其他元素向下移动。有没有办法解决这个问题，这样标签就不会将我的其他元素向下移动，同时还能在这个输入框中输入内容？
HTML:
HTML：
<div id="wrapper">
<div class="header">
<div id="head_login">
Login
<div id="arrow-down"></div>
</div>
</div>
<div id="head_break"></div>
<div class="content_splash">
<form>
**<input type="text" id="firstname" /></form>**
<div id="vertical_one"></div>
<div id="vertical_two"></div>
<p id="OR"> OR </p>
<div id="facebook_login"><img src="{% static 'home/facebook_login.gif' %}" /></div>
</div>
<div id="content_break"></div>
<div class="content_description">
<h2> What is the Title? </h2>
</div>
<div id="content_description_break"></div>
<div class="content_howitworks">
<h2> How it Works.</h2>
</div>
<div id="footer_break"></div>
</div>
CSS:
CSS：
content_splash{
position: relative;
margin-top: 30px;
height: 500px;
border: 1px solid black;
}
.content_splash input{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.content_splash #firstname{
position: absolute;
margin-top: 200px;
width: 170px;
height: 25px;
}
.content_splash #vertical_one{
position: absolute;
width: 1px;
height: 60px;
margin-left: 310px;
margin-top: 298px;
background: black;
}
.content_splash #vertical_two{
position: absolute;
width: 1px;
height: 60px;
margin-left: 310px;
margin-top: 380px;
background: black;
}
.content_splash #OR{
position: absolute;
padding-top: 346px;
padding-left:300px;
color: black;
}
.content_splash #facebook_login{
position: absolute;
padding-top: 350px;
padding-left: 350px;
}
#content_break {
margin-top: 20px;
height: 1px;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#e2e3e4), to(#e2e3e4), color-stop(50%, black));
}
.content_description{
margin-top: 20px;
height: 400px;
}
.content_description h2{
font-size: 40px;
font-family: Trebuchet MS;
padding-left: 30px;
color: #a2caf6;
}
#content_description_break {
margin-top: 20px;
height: 1px;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#e2e3e4), to(#e2e3e4), color-stop(50%, black));
}
.content_howitworks{
margin-top: 20px;
height: 400px;
}
.content_howitworks h2{
font-size: 40px;
font-family: Trebuchet MS;
padding-left: 30px;
color: #a2caf6;
}
回答by MisterBla
Add a z-index to the input.
向输入添加 z-index。
.content_splash #firstname{
position: absolute;
margin-top: 200px;
width: 170px;
height: 25px;
z-index: 1;
}
EDIT
编辑
As by request of @gaitat, I will explain why this works.
根据@gaitat 的要求，我将解释为什么会这样。
Assume the following HTML:
假设以下 HTML：
<div class="parent">
I am the parent.
<div class="child red">I am the red child.</div>
<div class="child blue">I am the blue child.</div>
<div class="child green">I am the green child.</div>
</div>
Now, also assume the following css:
现在，还假设以下 css：
.parent
{
position: relative;
}
.child
{
position: absolute;
padding: 5px;
}
.red
{
background-color: red;
}
.blue
{
background-color: blue;
}
.green
{
background-color: green;
}
As you can see, in the DOM, the green child is the last child of parent, thus it's rendered last. The last rendered element, assuming an absolute position and no z-indexis used, will be rendered on top.
正如你所看到的，在 DOM 中，绿色的孩子是父母的最后一个孩子，因此它被最后渲染。最后渲染的元素，假设一个绝对位置并且没有z-index被使用，将被渲染在顶部。
Now, when we add a z-index to the red child:
现在，当我们向红色孩子添加 z-index 时：
.red
{
background-color: red;
z-index: 1;
}
You will see that the red child will be rendered on top, because his z-index is higher than the other children, who have a z-index of 0 (default). See the JSFiddle here showing this.
你会看到红色的孩子将被渲染在顶部，因为他的 z-index 高于其他孩子，他们的 z-index 为 0（默认）。请参阅此处显示的 JSFiddle。
Do keep in mind that this only works with siblings sharing the same direct parent, otherwise it will not.
请记住，这只适用于共享相同直接父级的兄弟姐妹，否则不会。
