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

सीएसएस:

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- सूचकांक जोड़ें।

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

अब, भी निम्न सीएसएस मान:

.parent 
{ 
    position: relative; 
} 

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

.red 
{ 
    background-color: red; 
} 

.blue 
{ 
    background-color: blue; 
} 

.green 
{ 
    background-color: green; 
} 

See the JSFiddle here

आप देख सकते हैं, डोम में, हरी बच्चा है माता-पिता के अंतिम बच्चे, इस प्रकार यह आखिरी बार प्रस्तुत किया जाता है। आखिरी प्रस्तुत तत्व, एक पूर्ण स्थिति मानते हैं और z-index का उपयोग नहीं किया जाता है, शीर्ष पर प्रस्तुत किया जाएगा।

अब, हम लाल बच्चे को एक z- सूचकांक जोड़ते हैं:

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

आपको लगता है कि लाल बच्चे, शीर्ष पर रेंडर किया जाएगा क्योंकि उसके z- सूचकांक अन्य बच्चों की तुलना में अधिक है देखेंगे, जिनके पास 0 (डिफ़ॉल्ट) का जेड-इंडेक्स है। See the JSFiddle here showing this.

ध्यान रखें कि यह केवल भाई बहनों के साथ काम करता है जो समान प्रत्यक्ष माता-पिता साझा करते हैं, अन्यथा यह नहीं होगा।