जेड-इंडेक्स क्यों काम नहीं करता है?

Question

तो अगर मैं z-index सही ढंग से समझ, यह सही इस स्थिति में होगा:

मैं इसे ऊपर div नीचे नीचे छवि (टैग/कार्ड) को रखना चाहते हैं। तो आप तीखे किनारों को नहीं देख सकते हैं। मैं यह कैसे करु?

z-index:-1 // on the image tag/card 

या

z-index:100 // on the div above 

या तो काम नहीं करता। न तो इस तरह के किसी भी संयोजन का संयोजन करता है। कैसे?

Answer 1

z-index संपत्ति केवल एक positionstatic (जैसे position: absolute;, position: relative;, या position: fixed) के अलावा अन्य मूल्य के साथ तत्वों पर काम करता है।

position: sticky; भी है जो फ़ायरफ़ॉक्स में समर्थित है, सफारी में प्रीफ़िक्स किया गया है, कस्टम फ्लैग के तहत क्रोम के पुराने संस्करणों में एक समय के लिए काम किया है, और माइक्रोसॉफ्ट द्वारा उनके एज ब्राउज़र में जोड़ने के लिए विचाराधीन है।

Answer 2

आपके तत्वों को एक स्थिति विशेषता होना चाहिए। (उदाहरण के लिए पूर्ण, सापेक्ष, तय) या जेड-इंडेक्स

Answer 3

कई मामलों में z-index के लिए काम करने के लिए एक तत्व को स्थानांतरित किया जाना चाहिए।

वास्तव में, प्रश्न में तत्वों के लिए position: relative लागू करने से समस्या हल हो जाएगी (लेकिन निश्चित रूप से जानने के लिए पर्याप्त कोड उपलब्ध नहीं है)।

वास्तव में, position: fixed, position: absolute और position: sticky भी z-index सक्षम हो जाएगा, लेकिन उन मूल्यों भी लेआउट बदल जाते हैं। position: relative के साथ लेआउट परेशान नहीं है।

अनिवार्य रूप से, जब तक कि तत्व position: static (डिफ़ॉल्ट सेटिंग) नहीं है, इसे स्थान माना जाता है और z-index काम करेगा।

---

के कई जवाब "ज़ेड-इंडेक्स क्यों काम नहीं कर रहा है?" प्रश्नों का दावा है कि z-indexकेवल स्थित तत्वों पर काम करता है। CSS3 के रूप में, यह अब सच नहीं है।

तत्वों कि flex items या grid itemsz-index उपयोग कर सकते हैं यहां तक ​​कि जब positionstatic है कर रहे हैं।

चश्मा से :

4.3. Flex Item Z-Ordering

फ्लेक्स आइटम वास्तव में इनलाइन ब्लॉक के रूप में एक ही रंग, इसी क्रम संशोधित दस्तावेज़ आदेश कच्चे दस्तावेज़ आदेश के स्थान पर प्रयोग किया जाता है को छोड़कर, और z-indexauto के अलावा अन्य मान एक स्टैकिंग संदर्भ बनाएं, भले ही positionstatic है।

5.4. Z-axis Ordering: the z-index property

ग्रिड मदों की पेंटिंग आदेश, इनलाइन ब्लॉक के रूप बिल्कुल वैसा ही है कि आदेश संशोधित दस्तावेज़ आदेश कच्चे दस्तावेज़ आदेश के स्थान पर प्रयोग किया जाता है को छोड़कर, और z-index मूल्यों अन्य की तुलना में auto स्टैकिंग प्रसंग बना भले ही positionstatic है।

यहाँ z-index का एक प्रदर्शन गैर तैनात फ्लेक्स आइटम पर काम कर रहा है: https://jsfiddle.net/m0wddwxs/

Answer 4

आप static के अलावा अन्य मूल्य के लिए स्थिति सेट लेकिन अपने तत्व के z-index अभी भी काम करने के लिए प्रतीत नहीं होता है, तो यह हो सकता है कि कुछ मूल तत्व z-index सेट है।

स्टैकिंग संदर्भों में पदानुक्रम होता है, और प्रत्येक स्टैकिंग संदर्भ माता-पिता के स्टैकिंग संदर्भ के स्टैकिंग क्रम में माना जाता है।

तो एचटीएमएल

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; } 
 
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div> 
 
<div id="el2" style="z-index: 3"> 
 
    <div id="el3" style="z-index: 8"></div> 
 
</div>

निम्नलिखित चाहे कितना बड़ा el3 की z-index की स्थापना की जाएगी साथ, यह हमेशा el1 के तहत किया जाएगा कि उसे अपने जनक कम स्टैकिंग संदर्भ है क्योंकि। आप el3 के आदेश को ढेर करने वाले स्तरों के रूप में स्टैकिंग ऑर्डर की कल्पना कर सकते हैं वास्तव में 3.8 जो से कम है।

आप माता-पिता तत्वों की स्टैकिंग संदर्भ जाँच करना चाहते हैं, तो आप इस का उपयोग कर सकते हैं:

var el = document.getElementById("#yourElement"); // or use $0 in chrome; 
do { 
    var styles = window.getComputedStyle(el); 
    console.log(styles.zIndex, el); 
} while(el.parentElement && (el = el.parentElement)); 

There is a great article about stacking contexts on MDN