div तत्व

8

पर्याप्त z-index एक उच्च के साथ position: absolute:

#element { 
    position: absolute; 
    top: 50px; 
    left: 200px; 
    z-index: 10; 
}

स्रोत

2010-05-28 12:51:39

0

आप इसे क्या करना है पोजीशनिंग और जेड-इंडेक्स का उपयोग करना;

स्रोत

2010-05-28 12:50:51 Salil

1

हाँ, आप अपने सीएसएस की जरूरत है इस

.floating-div { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    z-index: 100000; 
}

स्रोत

2010-05-28 12:53:27

+0

हेहे, हाइविमिंड! –

+0

यदि आप वास्तव में उच्च जेड-इंडेक्स का उपयोग कर रहे हैं, तो आप शायद उन्हें सही तरीके से उपयोग नहीं कर रहे हैं। आम तौर पर लोग इन्हें 'वास्तव में, वास्तव में, इसे शीर्ष पर रखें' कहने के तरीके के रूप में उपयोग करते हैं, लेकिन फिर क्या होता है यदि किसी अन्य तत्व में 100001 है? जेड-इंडेक्स प्रबंधित करने के बेहतर तरीके पर कोड उदाहरणों के लिए मेरा 'उत्तर' देखें। – Beejamin

+0

मैं पूरी तरह से सहमत हूं, मैं केवल 'बड़े' टाइप कर रहा था ताकि उच्च संख्या के महत्व के रूप में अप्रिय रूप से स्पष्ट हो। –

4

यह एक Tatu का जवाब है, जो काम करेगा करने के लिए अनुवर्ती है की तरह कुछ देखने के लिए है, लेकिन एक बेकार, लेकिन बहुत आम, रास्ते में जेड इंडेक्स का उपयोग करता है।

जेड-इंडेक्स अन्य स्थित तत्वों के सापेक्ष स्थित तत्वों के ढेर क्रम को निर्धारित करता है। स्टैकिंग ऑर्डर माता-पिता तत्वों के स्टैकिंग ऑर्डर से भी संबंधित है। तो:

आप एक पृष्ठ में दो भाई तत्व जब:

<body> 
    <div style="position:absolute;z-index:2"></div><!-- Position 2 (top) --> 
    <div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) --> 
</body>

ये दोनों अपने माता पिता के अनुसार खड़ी दिखती हैं - body, जो ढेर के उसके डिफ़ॉल्ट 'सबसे नीचे' पर है।

उनके अभिभावकों को

अब, जब इन तत्वों z के सूचकांक बच्चे हैं, ढेर में अपनी स्थिति निर्धारित किया जाता है रिश्तेदार की स्थिति:

<body> 
    <div style="position:absolute;z-index:2"><!-- Position 2 (top) --> 
     <div style="position:absolute;z-index:2"></div><!-- Position 2.2 --> 
     <div style="position:absolute;z-index:1"></div><!-- Position 2.1 --> 
    </div> 
    <div style="position:absolute;z-index:1"><!-- Position 1 (bottom) --> 
     <div style="position:absolute;z-index:2"></div><!-- Position 1.2 --> 
     <div style="position:absolute;z-index:1"></div><!-- Position 1.1 --> 
    </div> 
</body>

मैं के रूप में एक होने यह उपयोगी बच्चों के बारे में सोच करने के लिए ' बिंदु 'जेड-इंडेक्स - इसलिए z-index:1 वाले तत्व के बच्चे में 1.x का z-index है। इस तरह, आप इसे देख सकते हैं, भले ही मैं यह div 100000 का जेड-इंडेक्स देता हूं, यह 2 के मूल पैर जेड-इंडेक्स के साथ किसी तत्व के शीर्ष पर कभी नहीं दिखाई देगा। 2.x हमेशा 1 के शीर्ष पर दिखाई देता है। एक्स

यह उपयोगी है जब आप, ओवरले तरह बातें 'चल' बना रहे हैं के बाद यह नोट, आदि इस तरह का सेटअप एक अच्छी शुरुआत है:

<body> 
    <div id="contentContainer" style="position:relative;z-index:1"> 
     All your 'page level content goes here. You can use all the z-indexes you like. 
    </div> 
    <div id="overlayContainer" style="position:relative;z-index:2"> 
     Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it. 
    </div> 
</body>

कुछ भी आप पर फ्लोट करना चाहते हैं शीर्ष 'ओवरले कंटनर' में जाता है - बेस जेड-इंडेक्स दो परतों को अलग रखता है, और आप 99 99 99 या 100000 जैसे भ्रमित उच्च जेड इंडेक्स का उपयोग करने से बच सकते हैं।

स्रोत

2010-05-28 14:11:33 Beejamin

+0

+ 1- सुंदर और सरल उत्तर – beldaz

+0

बहुत बहुत धन्यवाद! – Beejamin

div तत्व

उत्तर

संबंधित मुद्दे