z- सूचकांक निरपेक्ष स्थिति

Question

नकारात्मक हाशिए की तरह सीएसएस प्रवंचना के परिणामस्वरूप बिना, कभी कभी मैं कुछ HTML कि HTML सामग्री है कि HTML दस्तावेज़ में बाद में होता है नीचे प्रदान की गई है है। भले ही मूल तत्वों को तकनीकी रूप से बाद के तत्वों से नीचे होना चाहिए, मैं बाद के तत्वों को ऊपर प्रदर्शित करना चाहता हूं।

यह एक निरपेक्ष स्थिति बताए बिना किसी HTML तत्व एक और तत्व ऊपर प्रदर्शित करने के लिए संभव है? ऐसा प्रतीत नहीं होता है कि जेड-इंडेक्स का पूर्ण स्थिति के बिना कोई प्रभाव पड़ता है।

Answer 1

हाँ: position:relative; z-index:10 का उपयोग करें।

z-indexposition:static (डिफ़ॉल्ट) के लिए कोई प्रभाव नहीं है।

ध्यान दें कि z- सूचकांक एक वैश्विक लेयरिंग प्रणाली नहीं है, लेकिन केवल एक तैनात माता-पिता के भीतर आदेश देने अलग करती है। यदि आपके पास:

<style type="text/css"> 
    div { position:relative } 
    #a { z-index:1 } 
    #a1 { z-index:99 } 
    #b { z-index:2 } 
</style> 
... 
<div id="a"><div id="a1">SUPER TALL</div></div> 
<div id="b">I WIN</div> 

... तो #a1b ऊपर प्रस्तुत करना कभी नहीं होगा, क्योंकि #b#a ऊपर स्तरित है। आप http://jsfiddle.net/DsTeK

Answer 2

पर इस का एक डेमो देख सकते हैं मैं जानता हूँ कि Phrogz 'जवाब पहले से ही स्वीकार किया गया है, और एक अच्छा जवाब यह है, लेकिन सिर्फ रिकार्ड के लिए: यदि आप हमेशा z-index जरूरत नहीं है।

जब आपके पास एक तत्व पर position:relative है, तो यह अन्य सभी तत्वों के शीर्ष पर भी प्रदर्शित किया जाएगा जिनके पास position (या position:static) नहीं है। यहां तक ​​कि यदि आपके पास कोई ज़ेड-इंडेक्स नहीं है!

jsFiddle।