無法輸入<input>標籤

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.

請記住，這隻適用於兄弟姐妹共享相同的直接父母，否則它不會。