Không thể nhập <input> thẻ

Question

Tôi hiện đang cố tạo biểu mẫu trên trang chủ của trang web của mình. Tuy nhiên, Im gặp sự cố khi có thể nhập trong các hộp nhập liệu. Trong định vị tuyệt đối, con trỏ không hiển thị. Khi tôi thay đổi vị trí từ tuyệt đối thành tương đối, tôi không còn gặp vấn đề này nữa. Thật không may, khi tôi làm điều này, nó di chuyển tất cả các yếu tố khác của tôi xuống. Có cách nào xung quanh điều này để thẻ không di chuyển các phần tử khác của tôi xuống, cùng với việc có thể nhập vào các ô nhập liệu này không?

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

Thêm z-index để đầu vào.

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

Example

EDIT

Như theo yêu cầu của @gaitat, tôi sẽ giải thích lý do tại sao các công trình này.

Giả HTML sau:

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

Bây giờ, cũng giả định css sau:

.parent 
{ 
    position: relative; 
} 

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

.red 
{ 
    background-color: red; 
} 

.blue 
{ 
    background-color: blue; 
} 

.green 
{ 
    background-color: green; 
} 

See the JSFiddle here

Như bạn có thể thấy, trong DOM, đứa trẻ xanh là con cuối cùng của cha mẹ, do đó nó được hiển thị cuối cùng. Phần tử được hiển thị cuối cùng, giả sử một vị trí tuyệt đối và không sử dụng z-index, sẽ được hiển thị ở trên cùng.

Bây giờ, khi chúng ta thêm một z-index cho đứa trẻ đỏ:

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

Bạn sẽ thấy rằng các con màu đỏ sẽ được trả lại trên đầu trang, vì z-index của mình là cao hơn so với những đứa trẻ khác, có chỉ số z là 0 (mặc định). See the JSFiddle here showing this.

Xin lưu ý rằng thao tác này chỉ hoạt động với anh chị em chia sẻ cùng một phụ huynh trực tiếp, nếu không thì sẽ không.