दिलचस्प पोस्ट
अररे लिस्ट में एक अग्रविकल्प पाश के अंदर जोड़ते समय समवर्ती सुधार की प्रतिलिपि पायथन के साथ एक ध्वनि चलायें त्रुटि को कैसे ठीक करें: NodeJs का उपयोग करते समय EADDRINUSE सुनें? जावा में सुंदर प्रिंट JSON ऋणात्मक सरणी अनुक्रमणियां सी में अनुमत हैं? जावास्क्रिप्ट में चर परिवर्तनों के लिए सुन रहा है स्ट्रिंग के रूप में संपूर्ण दस्तावेज़ HTML कैसे प्राप्त करें? टेम्पलेट <अहस्ताक्षरित int N> क्या मतलब है? शरीर को स्क्रॉल करने से रोकें, लेकिन ओवरले स्क्रॉलिंग को अनुमति दें रैवल्यूज़, लावल्यूस, एक्सवल्यूज, ग्लुवेल और प्रोजेल्स क्या हैं? क्या जावा एसक्यूएल.टैमस्टैम्प समयक्षेत्र विशिष्ट है? कुछ वर्गों में यूआईआईटी के बजाय एनएटी का प्रयोग क्यों करता है? सी # में गतिशील रूप से एक क्लास कैसे बनाइए? मैक ओएस एक्स पर MySQLdb (पायथन डेटा एक्सेस लाइब्रेरी को MySQL) कैसे स्थापित करें? AngularJS में एकाधिक विशिष्ट मॉडल गुणों (या संबंध में) द्वारा फ़िल्टरिंग

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>