किसी अन्य तत्व के शीर्ष पर किसी तत्व को कैसे स्थानांतरित करें?

Question

मेरे पास एक मेनू और एक खोज बॉक्स है। मैं मेनू आइटम के साथ खोज बॉक्स रखना चाहता हूं। लेकिन मेरे मेनू जो निम्नलिखित सीएसएस का उपयोग करता है 'custommenu' नामक एक अलग एक div में फ़ाइल में बनाया जा रहा है:

#custommenu { 
    position:relative; 
    z-index:999; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 10px 16px; 
    width: 918px; 
    background-color: #FB0A51; 
    border-top-left-radius: 10px 10px; 
    -moz-border-top-left-radius: 10px 10px; 
    border-top-right-radius: 10px 10px; 
    -moz-border-top-right-radius: 10px 10px; 
} 

जबकि मैं एक अलग फाइल जो इस तरह दिखता में मेरे खोज बॉक्स है:

<div class="header"> 
    some code 
    <div class="quick-access"> 
     some code 
    <php echo $this->getChildHtml('topSearch') ?>; 
    </div> 
</div> 

मैं सीएसएस फ़ाइल में निम्न ताकि खोज बॉक्स मेनू के शीर्ष पर आता है जोड़ने की कोशिश की, लेकिन यह काम नहीं किया

.header .form-search { 
    position:absolute; 
    right:29px; 
    z-index:1000; 
    top: 80px; 
    width:315px; 
    height:30px; 
    padding:1px 0 0 16px; 
} 

फिर भी खोज बॉक्स मेनू के पीछे छिपा हुआ हो जाता है। मैं मेनू में सर्च बॉक्स एन चाहता हूं। मैं यह कैसे करुं?

संपादित करें: यहाँ div के जो खोज बॉक्स होता है की सीएसएस,

.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;} 
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; } 
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; } 

है और यह है कि यह कैसे अभी लग रहा है, (बैंगनी लिंक है - त्वरित पहुँच, सफेद बॉक्स खोज जो पीछे जा रहा है है गुलाबी 'custommenu' क्षेत्र। मैं गुलाबी क्षेत्र पर सफेद बॉक्स करना चाहते हैं। और इस सब के अंदर 'शीर्षक') है

Answer 1

@all

बहुत देर से जवाब देने के लिए क्षमा करें। लेकिन मुझे थोड़ा सा झुकाव के बाद समाधान मिला। मैंने अपने हेडर के जेड-इंडेक्स को मेरे कस्टममेनू की तुलना में उच्च मूल्य पर सेट किया है। चूंकि मेरे हेडर में खोज बॉक्स है जिसमें मेनू पर आने वाले खोज बॉक्स के लिए उच्च मूल्य होना आवश्यक है।

कोड यह अब

.header{ position: relative; z-index: 4000; } 
.header search { position: relative; z-index: 99999; } 
.custommenu { position: relative; z-index: 1000 ;} 

यह पूरी तरह से मिल गया मेरे खोज मेरे मेनू गठबंधन के शीर्ष पर बॉक्स की तरह लग रहा है। उन सभी के लिए फिर से धन्यवाद जिन्होंने मदद की। इसकी प्रशंसा करना।

Answer 2

float साथ प्रयास करें? या display:block;
अगर मैं इस कोड का उपयोग किया गया था, मैं इस तरह सीएसएस लिखते थे:

position:relative; 
left:some value; 
top:some value; 
Z-index: -999 

Answer 3

खोज मेनू के पीछे प्रदर्शित होने बॉक्स z- इंडेक्स मुद्दे की तरह लगता है - शायद मेनू के कंटेनर एक उच्च है खोज बॉक्स में जेड-इंडेक्स, 99 99 99 में सर्चबॉक्स जेड-इंडेक्स को बदलने का प्रयास करें।

Answer 4

z-index को गैर स्थैतिक स्थिति की आवश्यकता होती है, हालांकि यह आपके कोड उदाहरणों से स्पष्ट नहीं है कि किस प्रकार की स्थिति वास्तव में आपके द्वारा उपयोग किए जा रहे तत्वों द्वारा उपयोग की जाती है z-index के साथ ढेर करने के लिए।

यहां किसी भी तरह का एक बहुत उपयोगी टूल है जो आपको यह निर्धारित करने में मदद कर सकता है कि आप किस प्रकार की स्थिति को अपने तत्वों के लिए उपयोग करना चाहते हैं, इस संबंध में।

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp