जेड-इंडेक्स के बच्चे: 'ऑटो' बनाम जेड-इंडेक्स: 0, और सीएसएस में "स्टैकिंग संदर्भ" क्या है?

Question

इससे पहले, मैं माना जाता है कि एक बच्चे के तत्व z अनुक्रमित एक तत्व अपनी मूल तत्व अपनी मूल की तुलना में उच्च z- सूचकांक है की एक भाई है कि खत्म नहीं हो सकता है। उदाहरण के लिए, divs ए और बी भाई बहन हैं। Div A 10 का एक z- सूचकांक है, और div B 5. Div B का z- इंडेक्स चाइल्ड तत्व है है: Div C, मेरी समझ से 9999 के एक z- सूचकांक के साथ, div Cनहींdiv A ऊपर तैनात किया जाएगा, क्योंकि div C के माता पिता (div B) div A की तुलना में कम z- सूचकांक है। यह सच है, जब तक कि div B में 'ऑटो' का ज़ेड-इंडेक्स न हो। जब div B में 'ऑटो' का एक जेड-इंडेक्स होता है, जो '0' होगा, क्योंकि यह से div A पर स्थितियों से विरासत में है, भले ही div B की z-index वास्तव में कम की तुलना में यह ' काम नहीं कर रहा हूँ

सीएसएस 2 कल्पना से, z- सूचकांक 'ऑटो'

वर्तमान स्टैकिंग संदर्भ में उत्पन्न बॉक्स के ढेर स्तर 0. है बॉक्स एक नया स्टैकिंग प्रसंग स्थापित नहीं है, जब तक यह है के रूप में परिभाषित किया गया है मूल तत्व।

मैं समझने में परेशानी हो रही "संदर्भ स्टैकिंग।" यह 0 से परिभाषित z- सूचकांक के बीच फर्क सिर्फ इतना है, और 'ऑटो' जो 0 है की एक डिफ़ॉल्ट प्रतीत हो रहा है, लेकिन यह भी कोई स्टैकिंग संदर्भ है । अधिक विशेष रूप से:

कोई स्टैकिंग सामग्री वाले तत्वों के बच्चे एक स्टैकिंग संदर्भ के भीतर अलग-अलग जेड-इंडेक्स क्यों हैं?

यहाँ एक बेला कि 0 से z- सूचकांक, और ऑटो के z- इंडेक्स के बीच अंतर पता चलता है। हरा div नीली div का एक बच्चा है, और लाल div नीली div का एक भाई है।

http://jsfiddle.net/c7Tvt/

Answer 1

अपने उदाहरण में, आप दो स्थितियों है, उन्हें फोन ब्लू और ब्लू-2।

ब्लू में, आपके पास दो स्टैकिंग संदर्भ हैं, पहले में #blue है और दूसरे में #red और #green शामिल हैं। #blue अपनी ही स्टैकिंग संदर्भ क्योंकि z-index: auto में है, और इस संदर्भ बस डिफ़ॉल्ट ढेर का हिस्सा है।

ब्लू -2 में, आपने z-index: 0 को #blue के लिए परिभाषित किया है, इसलिए यह #red के समान स्टैकिंग संदर्भ का हिस्सा है। ब्लू -2, #blue में पहले चित्रित किया गया है क्योंकि इसमें सबसे कम जेड-इंडेक्स है, 0. हालांकि, #green#blue का बच्चा है और #blue पर चित्रित हो जाता है, माता-पिता और बच्चे एक नया स्टैकिंग संदर्भ बनाते हैं (एक उप-स्टैकिंग संदर्भ तुम चाहो)। अंत में, #red नीले-हरे ढेर में चित्रित किया गया है, क्योंकि लाल z- सूचकांक 2, जो 0. इस मामले में के नीले z- सूचकांक से अधिक है, हरे रंग के z- सूचकांक के संबंध में इसकी स्टैकिंग स्तर को प्रभावित करता है #blue में नीला और कोई अन्य बच्चा तत्व। ब्लू-2 में, वहाँ तीन अत्यधिक संदर्भों, डिफ़ॉल्ट हैं (# 1), लाल और नीले रंग (# 2) के लिए, और अन्य है कि नीले और हरे रंग है (# 3)।

कुंजी प्वाइंट
z-index: auto एक नया स्टैकिंग संदर्भ जबकि z-index: 0 करता है करने के लिए एक तैनात तत्व जोड़ शुरू नहीं करता है। याद रखें, कम से कम एक स्टैकिंग संदर्भ है, डिफ़ॉल्ट पर जो तत्वों के लिए पृष्ठ पर उनके प्राकृतिक HTML/DOM आदेश के आधार पर परिभाषित किया गया है।

नोट: मैं जताया स्थिति का वर्णन के रूप में अगर आप दो वेब पेज, #red, #blue, #green के साथ एक और #red2, #blue2, #green2 के साथ दूसरे था की स्वतंत्रता ले लिया। हकीकत में, चूंकि सभी div एक ही पृष्ठ पर हैं, सभी स्टैकिंग स्तरों में सभी तत्व होते हैं। जब एक ही स्टैक में दो लाल div होते हैं, #red2#red पर चित्रित किया जाएगा क्योंकि डीओएम पेड़ के नीचे तत्वों को पहले तत्वों पर चित्रित किया गया है।

संदर्भ
मैंने पाया काफी पढ़ने के लिए उपयोगी है:
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

आप और भी अधिक विस्तार चाहते हैं, को देखने का प्रयास:
http://www.w3.org/TR/CSS21/zindex.html