दिलचस्प पोस्ट
एंड्रॉइड: पिछला स्टैक से सभी पिछली गतिविधियों को निकालें रोलेन पर्यावरण.गेट कॉन्फ़िगरेशन सेटिंग वैल्यू ("MYKEY") को बुलाते समय मुझे SEHException क्यों मिल रहा है? मैं iTextSharp के साथ पाठ स्वरूपण कैसे प्राप्त करूं? एसक्यूएल एकाधिक कॉलम क्रम GC का उपयोग करने के बारे में क्या गलत है। संकलक ()? जावा में बाइनरी प्रारूप में एक पूर्णांक को प्रिंट करें सी ++: क्लास डेटा सदस्य को पॉइंटर ":: *" $ (दस्तावेज़) .on ('click', '#id', फ़ंक्शन () {}) बनाम $ ('# आईडी')। ('पर क्लिक करें', फ़ंक्शन () {}) .NET पर डबल सटीक समस्याएं जावा यादृच्छिक हमेशा जब मैं बीज सेट एक ही नंबर देता है? दो सूचियों के बीच अंतर JQuery के साथ एक ड्रॉप-डाउन सूची के चयनित मान को बदलें जावाएक्सएक्स नियंत्रक वर्ग काम नहीं कर रहा है पायथन के साथ माउस को नियंत्रित करना Javascript में + var और -वायर एकर ऑपरेटर समझाएं

Z- अनुक्रमणिका क्यों काम नहीं करता है?

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

यहां छवि विवरण दर्ज करें

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

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

या

 z-index:100 // on the div above 

या तो काम नहीं करता है न तो इस तरह से कुछ का एक संयोजन होता है कैसे?

वेब के समाधान से एकत्रित समाधान "Z- अनुक्रमणिका क्यों काम नहीं करता है?"

z-index प्रॉपर्टी केवल तत्वों पर static position: absolute; अलावा अन्य तत्वों पर काम करती है (जैसे position: absolute; position: relative; या position: fixed )।

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

आपके तत्वों को एक स्थिति विशेषता की आवश्यकता है (जैसे पूर्ण, रिश्तेदार, फिक्स्ड) या z- इंडेक्स काम नहीं करेगा

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

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

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

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


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

तत्व जो फ्लेक्स आइटम या ग्रिड आइटम हैं, position static होने position भी z-index उपयोग कर सकते हैं।

ऐनक से:

4.3। फ्लेक्स मद जेड-ऑर्डरिंग

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

5.4। Z- अक्ष क्रम: z-index संपत्ति

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

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

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

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

तो निम्न html के साथ

 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>