सीएसएस: बिल्कुल स्थित छद्म तत्व z-index खो देता है?

Question

transition का उपयोग करते समय एक पूरी तरह से स्थित छद्म तत्व z-index क्यों खो देगा?

बेला: http://jsfiddle.net/RyanWalters/jNgLL/

क्या हो रहा है? जब आप li पर क्लिक करते हैं, तो यह z-index मानों को बदले बिना बाईं ओर स्लाइड करता है। हालांकि, :after सामग्री li के शीर्ष पर पॉप अप हो रही है।

क्या होना चाहिए? मुझे उम्मीद थी कि यह li के पीछे छिपा रहेगा।

सीएसएस (एक छोटा सा, पूर्ण उदाहरण के लिए बेला देख सरलीकृत):

li { 
    position: relative; 
    transition: transform 0.2s; 
} 

li.active { 
    transform: translateX(-100px); 
} 

li:after { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: -1; 
    content: "Yada yada"; 
} 

क्यों :after सामग्री li पीछे नहीं रह रहा है?

Answer 1

मैं w3.org पर इस पाया है, जो मुझे लगता है कि यह बताते हैं: http://www.w3.org/TR/css3-transforms/#effects

कोई भी मान दोनों स्टैकिंग संदर्भ और धारक ब्लॉक के निर्माण में परिणत परिणामों के लिए 'कोई नहीं' के अलावा अन्य। ऑब्जेक्ट निश्चित स्थित वंशजों के लिए एक ब्लॉक के रूप में कार्य करता है।

मैं यह समझ के रूप में, अपने li:after छद्म तत्व li.active तत्व की स्टैकिंग संदर्भ के अंदर है, और इसलिए इसके पीछे दिखाई देती नहीं कर सकते।

Answer 2

@ बर्नज़ेड का जवाब सही है। इधर, एक समाधान है, हालांकि:

लपेटें position: relative के साथ एक <div> (या किसी अन्य तत्व) का उपयोग कर <li> अंदर सामग्री है, तो छद्म तत्व यह चाइल्ड तत्व के पीछे होने के लिए बाध्य करेगा पर z-index: -1।

एचटीएमएल:

<ul> 
    <li><div>This is the first item</div></li> 
</ul> 

सीएसएस:

li, 
li div { 
    position: relative; 
} 

li:after { 
    position: absolute; 
    z-index: -1; 
} 

उदाहरण: http://jsfiddle.net/shshaw/jNgLL/3/

इसके अलावा ब्याज

यहाँ आवश्यक कोड है ध्यान दें: यदि आप :before psuedo तत्व का उपयोग करते हैं, तो आपको z-index: -1 की आवश्यकता नहीं है क्योंकि यह पहले से ही position: relative स्टैकिंग ऑर्डर में बाल तत्व के अंतर्गत आ रहा है।