<input> 'da yazılamaz Etiketler

Question

Şu anda sitemde ön sayfada bir form oluşturmaya çalışıyorum. Ancak, giriş kutularında yazı yazabilmek için sorunlarım var. Mutlak konumlandırmada, imleç görünmez. Konumlandırmayı mutlaktan göreceli olarak değiştirdiğimde, artık bu konuya sahip değilim. Ne yazık ki, bunu yaptığımda, tüm diğer unsurları aşağıya taşır. Bu şekilde bir yol var mı, bu yüzden bu giriş kutularına yazı yazabilmem için etiketim diğer öğeleri aşağıya taşımıyor mu?

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

girişine bir z-index ekleyin. neden bu işleri @gaitat talebiyle itibariyle

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

Example

DÜZENLEME, ben açıklayacağım.

aşağıdaki HTML varsayın: Gördüğünüz gibi

.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, yeşil çocuk: Artık

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

, ayrıca aşağıdaki css varsayalım Ebeveynin son çocuğu, bu yüzden son haline getirildi. En son oluşturulmuş eleman, mutlak bir konum ve z-index no'lu kullanıldığında üstte oluşturulacaktır. Şimdi

, kırmızı çocuğa bir z-index eklediğinizde:

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

Onun Z endeksi diğer çocuklara göre daha yüksek olduğu için kırmızı çocuk, üstünde icra edileceğini göreceğiz, Z-endeksi 0 olan var (varsayılan). See the JSFiddle here showing this.

, bu sadece kardeşler aynı direkt üst paylaşımı ile çalışır unutmayın Do aksi takdirde olmaz.