कई मामलों में 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
उपयोग कर सकते हैं यहां तक कि जब position
static
है कर रहे हैं।
चश्मा से :
4.3. Flex Item Z-Ordering
फ्लेक्स आइटम वास्तव में इनलाइन ब्लॉक के रूप में एक ही रंग, इसी क्रम संशोधित दस्तावेज़ आदेश कच्चे दस्तावेज़ आदेश के स्थान पर प्रयोग किया जाता है को छोड़कर, और z-index
auto
के अलावा अन्य मान एक स्टैकिंग संदर्भ बनाएं, भले ही position
static
है।
5.4. Z-axis Ordering: the z-index
property
ग्रिड मदों की पेंटिंग आदेश, इनलाइन ब्लॉक के रूप बिल्कुल वैसा ही है कि आदेश संशोधित दस्तावेज़ आदेश कच्चे दस्तावेज़ आदेश के स्थान पर प्रयोग किया जाता है को छोड़कर, और z-index
मूल्यों अन्य की तुलना में auto
स्टैकिंग प्रसंग बना भले ही position
static
है।
यहाँ z-index
का एक प्रदर्शन गैर तैनात फ्लेक्स आइटम पर काम कर रहा है: https://jsfiddle.net/m0wddwxs/
स्रोत
2016-05-18 21:14:10
बेहतर समझ – sandeep