Question

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

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

Answer 1

在输入中添加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.

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

无法输入<input />标签

1 个答案: