无法输入<input>标签

我正在尝试在我的网站的首页上创建一个表单。但是，我的问题能够在输入框中输入。在绝对定位中，光标不显示。当我将定位从绝对变为相对时，我不再有这个问题。不幸的是，当我这样做时，它将我所有的其他元素向下移动。有没有办法解决这个问题，所以标签不会移动我的其他元素，以及能够输入到这个输入框？无法输入<input>标签

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：

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; 
}

来源

2013-08-25 user2714604

添加的z-index到输入。

.content_splash #firstname{ 
    position: absolute; 
    margin-top: 200px; 
    width: 170px; 
    height: 25px; 
    z-index: 1; 
}

Example

编辑

正如@gaitat的要求，我会解释为什么这个工程。

假设以下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>

现在，还假设下面的CSS：

.parent 
{ 
    position: relative; 
} 

.child 
{ 
    position: absolute; 
    padding: 5px; 
} 

.red 
{ 
    background-color: red; 
} 

.blue 
{ 
    background-color: blue; 
} 

.green 
{ 
    background-color: green; 
}

See the JSFiddle here

正如你所看到的，在DOM，绿色的孩子是父母的最后一个孩子，因此它最后呈现。假设使用绝对位置并且没有使用z-index，最后呈现的元素将呈现在顶部。

现在，当我们的z-index添加到红孩子：

.red 
{ 
    background-color: red; 
    z-index: 1; 
}

你会看到红孩子将在上面呈现，因为他的z-index比其他孩子高，谁有z-index为0（默认）。 See the JSFiddle here showing this.

请记住，这只适用于兄弟姐妹共享相同的直接父母，否则它不会。

来源

2013-08-25 01:06:55 MisterBla

@Zeaklous编辑答案，所以它仍然有效。 – MisterBla

你能解释为什么会发生这种情况吗？ – gaitat

@gaitat查看我更新的答案。 – MisterBla

无法输入<input>标签

回答

相关问题