:: छद्म-तत्व स्टैकिंग ऑर्डर समस्या से पहले

Question

जब स्थिर रूप से स्थित है, :: बच्चे की सामग्री से पहले छद्म-तत्व स्टैक्स (जेड-इंडेक्स) से पहले, लेकिन बच्चे की पृष्ठभूमि के बाद। क्या कोई यह समझा सकता है कि यह क्यों हो रहा है या यह भी कैसे हो रहा है या यदि यह कोई मुद्दा है कि सभी प्रमुख ब्राउज़रों के पास है?

<style> 
div { background-color:yellow; width:400px; } 
div::before { background-color:red; content:"div::before"; } 
div::after { background-color:green; content:"div::after"; } 
div p { background-color:blue; color:white; margin:-15px 0; padding:0; } 
</style> 
<div> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p> 
</div> 

http://jsfiddle.net/funkyscript/ALrgf/

Answer 1

div की सामग्री है, जो दो छद्म तत्वों और p तत्व, एक ही स्टैकिंग प्रसंग (div के सापेक्ष) में भाग लेने के शामिल हैं। ऐसा इसलिए है क्योंकि, जैसा कि आप ध्यान देते हैं, उनमें से तीन स्थिर रूप से स्थित हैं; दूसरे शब्दों में, बिल्कुल भी तैनात नहीं है। (हाँ, इन तत्वों को z अक्ष के साथ ढेर है, जबकि प्रवाह में, आप बस z-index का उपयोग कर अपने ढेर के स्तर में हेरफेर नहीं कर सकते क्योंकि वे तैनात नहीं कर रहे हैं।)

Here's a summary^{1 जिस क्रम में विभिन्न भागों रहे हैं की} तैयार की, बोल्ड emphases जहां अपने प्रश्न के लिए प्रासंगिक:

प्रत्येक बॉक्स एक संदर्भ stacking के अंतर्गत आता है। दिए गए स्टैकिंग संदर्भ में प्रत्येक स्थित बॉक्स में एक पूर्णांक स्टैक स्तर है, जो समान स्टैकिंग संदर्भ में ज़ेड-अक्ष रिश्तेदार अन्य स्टैक स्तरों पर इसकी स्थिति है। अधिक ढेर के स्तर वाले बॉक्स हमेशा कम स्टैक स्तर वाले बक्से के सामने स्वरूपित होते हैं। बॉक्स में नकारात्मक ढेर के स्तर हो सकते हैं। स्टैकिंग संदर्भ में एक ही स्टैक स्तर वाले बॉक्स दस्तावेज़ पेड़ ऑर्डर के अनुसार बैक-टू-फ्रंट हैं।

प्रत्येक स्टैकिंग संदर्भ में, निम्नलिखित परतों में रंगा जाता बैक-टू-सामने आदेश:

1. पृष्ठभूमि और तत्व स्टैकिंग संदर्भ बनाने की सीमाओं।
2. बच्चा नकारात्मक स्टैक स्तर (सबसे नकारात्मक पहले) के साथ संदर्भों को ढेर करता है।
3. इन-फ्लो, गैर-इनलाइन-स्तर, गैर-स्थित वंशज।
4. गैर-स्थित फ्लोट्स।
5. इनलाइन प्रवाह, इनलाइन-स्तर, गैर-स्थित वंशज, इनलाइन टेबल और इनलाइन ब्लॉक समेत।
6. बच्चे ढेर स्तर 0 और ढेर स्तर के साथ तैनात वंशज स्टैकिंग संदर्भ 0.
7. बच्चे सकारात्मक ढेर के स्तर के साथ स्टैकिंग संदर्भ (कम से कम सकारात्मक पहले)।

div::before के बाद से div की सामग्री से पहले डाला जाता है, और div::after यह बाद डाला जाता है, जब वे एक स्थिर स्थिति में इनलाइन प्रदर्शित वे स्वाभाविक रूप से इस नियम का पालन करेंगे, भले ही (एक ब्लॉक तत्व sandwiching ऑर्डरिंग ब्लॉक ब्लॉक और इनलाइन बक्से दोनों खाते में लेता है)।

ध्यान दें कि, स्पष्ट कारणों के लिए, पृष्ठभूमि आमतौर पर पहली चित्रित कर रहे हैं, सामग्री उन्हें डालने के साथ:

1. p तत्व, एक ब्लॉक स्तर तत्व के रूप में, एक पृष्ठभूमि है कि पहले चित्रित है (# 3 है)।

2. इनलाइन-स्तर छद्म-तत्वों को p पृष्ठभूमि (# 5) पर उनकी पृष्ठभूमि के साथ खींचा जाता है। स्वरूपण मॉडल में, वे p तत्व के भाई बहन हैं, इसलिए वे सभी div के स्टैकिंग संदर्भ में भाग लेते हैं और p की नहीं।

3. div::before छद्म तत्व (दोनों अपनी सामग्री और पृष्ठभूमि) p पाठ के पीछे दिखाई देता है क्योंकि यह दृश्य पेड़ में p पहले आता है।

4. div::after छद्म तत्व (दोनों अपनी सामग्री और पृष्ठभूमि) p पाठ के सामने प्रकट होता है, क्योंकि यह दृश्य पेड़ में p बाद आता है।

मेरी टिप्पणी, if you make the pseudo-elements display as blocks में संकेत के रूप में, div::beforep तत्व की कि पीछे छिप जाएगा, लेकिन नहीं पाठ की पृष्ठभूमि; इसके बजाय, div::before का पाठ पृष्ठभूमि और p तत्व के पाठ के बीच स्थित होगा। यह भी ध्यान दें कि div::after की पृष्ठभूमि p के सामने चित्रित की गई है, जबकि सामग्री को सबसे पहले चित्रित किया गया है। दोबारा, इसे ऊपर दिए गए नियमों के संबंध में सामग्री के पहले, या पीछे चित्रित पृष्ठभूमि के साथ करना है।

---

_{एक बहुत अधिक विस्तृत विवरण कल्पना की Appendix E में पाया जा सकता।}