इसलिए अगर मैं z-indexसही तरीके से समझूं, तो यह इस स्थिति में सही होगा:
मैं नीचे दी गई छवि (टैग / कार्ड) को उसके ऊपर के डिव के नीचे रखना चाहता हूं। तो आप तेज किनारों को नहीं देख सकते हैं। मैं यह कैसे करु?
z-index:-1 // on the image tag/cardया
z-index:100 // on the div aboveया तो काम नहीं करता है। न ही इस तरह की किसी चीज का संयोजन है। कैसे?
जवाबों:
z-indexसंपत्ति केवल एक साथ तत्वों पर काम करता है positionके अलावा अन्य मूल्य static(जैसे position: absolute;, position: relative;, या position: fixed)।
वहाँ भी है position: sticky;जो फ़ायरफ़ॉक्स में समर्थित है, सफारी में उपसर्ग है, एक कस्टम ध्वज के तहत क्रोम के पुराने संस्करणों में एक समय के लिए काम किया है, और माइक्रोसॉफ्ट द्वारा उनके एज ब्राउज़र में जोड़ने के लिए विचाराधीन है।
महत्वपूर्ण
नियमित स्थिति के लिए, उन position: relativeतत्वों को शामिल करना सुनिश्चित करें जहां आपने भी सेट किया है z-index। अन्यथा, यह प्रभावी नहीं होगा।
position: relativeसे जेड-इंडेक्स के लिए काम करना चाहते हैं, भले ही तत्व डिफ़ॉल्ट रूप से अन्य रिश्तेदार तरीकों से व्यवहार कर रहे हों
staticतत्व स्थिर हैं और अंदर नहीं जा सकते x, y or z planes। वे में स्थानांतरित नहीं कर सकते x plane (left or right)या y plane (top or bottom)की तरह जब हम साथ काम करते हैं position: absolute। और न ही वे अंदर जा सकते हैं z plane i.e. with z-index।
z-indexग्रिड तत्व का उपयोग करने के साथ किसी भी मुद्दे के बारे में जानते हैं ??
यदि आप स्थिति को अन्य मान से सेट करते हैं, 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>कोई बात नहीं कितना बड़ा z-indexके el3लिए सेट हो जाएगा, यह हमेशा के तहत किया जाएगा el1, क्योंकि यह की मूल कम स्टैकिंग संदर्भ है। आप स्टैकिंग ऑर्डर की कल्पना उन स्तरों के रूप में कर सकते हैं जहां स्टैकिंग ऑर्डर el3वास्तव में 3.8 है जो 5 से कम है ।
यदि आप मूल तत्वों के स्टैकिंग संदर्भों की जाँच करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:
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));आपके तत्वों में एक positionविशेषता होनी चाहिए । (उदाहरण के लिए absolute, relative, fixed) या z-indexनहीं होगा काम।
कई मामलों में z-indexकाम करने के लिए एक तत्व तैनात होना चाहिए ।
वास्तव में, position: relativeप्रश्न में तत्वों को लागू करने से समस्या का समाधान होगा (लेकिन यह सुनिश्चित करने के लिए पर्याप्त कोड उपलब्ध नहीं है)।
वास्तव में position: fixed, position: absoluteऔर position: stickyसक्षम भी करेगा z-index, लेकिन वे मान भी लेआउट बदलते हैं। साथ position: relativeलेआउट परेशान नहीं कर रहा है।
अनिवार्य रूप से, जब तक कि तत्व position: static(डिफ़ॉल्ट सेटिंग) नहीं है, तब तक इसे तैनात माना जाता है और z-indexकाम करेगा।
कई जवाब "क्यों जेड-इंडेक्स काम नहीं कर रहा है?" प्रश्न केवल यह कहते हैंz-index तैनात तत्वों पर काम करता है। CSS3 के रूप में, यह अब सच नहीं है।
तत्वों है कि कर रहे हैं फ्लेक्स आइटम या ग्रिड आइटम का उपयोग कर सकते z-indexयहाँ तक कि जब positionहै static।
ऐनक से:
4.3। फ्लेक्स आइटम जेड-ऑर्डरिंग
फ्लेक्स आइटम वास्तव में इनलाइन ब्लॉक के रूप में एक ही रंग, इसी क्रम संशोधित दस्तावेज़ आदेश कच्चे दस्तावेज़ आदेश के स्थान पर प्रयोग किया जाता है को छोड़कर, और
z-indexअतिरिक्त अन्य मानautoभले ही एक स्टैकिंग प्रसंग बनाpositionहैstatic।5.4। Z- अक्ष क्रम:
z-indexसंपत्तिग्रिड मदों की पेंटिंग आदेश वास्तव में, इनलाइन ब्लॉक के रूप में ही है कि आदेश संशोधित दस्तावेज़ आदेश को छोड़कर कच्चे दस्तावेज़ आदेश के स्थान पर प्रयोग किया जाता है, और
z-indexअतिरिक्त अन्य मानautoभले ही एक स्टैकिंग प्रसंग बनाpositionहैstatic।
यहां z-indexगैर-तैनात फ्लेक्स आइटम पर काम करने का एक प्रदर्शन है : https://jsfiddle.net/m0wddwxs/
position: staticरूप से ठीक उसी के साथ व्यवहार करने के लिए कहती है क्योंकि यह position: relativeलेआउट के उन तरीकों की गतिशील प्रकृति के कारण फ्लेक्स और ग्रिड आइटम के लिए इलाज करेगा । इसलिए मैं शायद यह कहूंगा कि यह CSS3 में अब सच नहीं है कि एक तत्व को तैनात करने की आवश्यकता है, लेकिन यह कि CSS3 फ्लेक्स और ग्रिड आइटम का इलाज करता है जैसे कि वे तैनात थे, भले ही। एक ही चीज को देखने के सिर्फ दो तरीके, हालांकि, शायद।
position:relative। पूर्ण स्थिति वाले फ्लेक्स आइटम के वंशज फ्लेक्स आइटम को उनके ब्लॉक के रूप में नहीं मानेंगे क्योंकि फ्लेक्स आइटम को पोजिशन नहीं किया जाता है। ( jsfiddle.net/0yo7utfL/2 )
overflow-y: scrollरोकता overflow-x: visibleहै ... क्या आप कृपया देख सकते हैं?
Stacking Context।