जेड-इंडेक्स पहले छद्म-तत्व

Question

मैंने पहले-छद्म तत्व के साथ 'हेडर' तत्व बनाया है। छद्म तत्व मूल तत्व के पीछे होना चाहिए। जब तक मैं अपना 'हेडर' जेड-इंडेक्स नहीं देता तब तक सबकुछ बढ़िया काम करता है।

मैं क्या चाहता हूं: अग्रभूमि पर पीला 'हेडर', पृष्ठभूमि में लाल छद्म तत्व और पीले 'हेडर' तत्व पर 30 का एक साधारण जेड-इंडेक्स।

header { 
    background: yellow; 
    position:relative; 
    height: 100px; 
    width: 100px; 
    z-index:30; /*This is the problem*/ 
} 

header::before { 
    content:"Hide you behind!"; 
    background: red; 
    position:absolute; 
    height: 100px; 
    width: 100px; 
    top:25px; 
    left:25px; 
    z-index:-1; 
} 

आप इस लिंक (http://jsfiddle.net/tZKDy/) पर मेरी समस्या का परीक्षण कर सकते हैं और आप समस्या को देखने के लिए जब आप सेट/डी 'शीर्षक के तत्व पर z- सूचकांक को हटा दें।

Answer 1

:: :: छद्म-तत्व शीर्षलेख तत्व के अंदर रखा गया है।

CSS Spec:

: पहले और: के बाद छद्म तत्वों अन्य बक्से के साथ बातचीत के रूप में यदि वे सिर्फ उनके संबद्ध तत्व के अंदर डाला वास्तविक तत्व थे।

हैडर तत्व creates a new Stacking Context के लिए z- सूचकांक की स्थापना, इसलिए नए छद्म तत्व आपके द्वारा बनाए हैडर तत्व के पीछे तैर नहीं सकते हैं, यह है कि स्टैकिंग प्रसंग के बाहर जाने के लिए होता है।

मेरा सुझाव है कि आप केवल किसी अन्य तत्व द्वारा हेडर तत्व से पहले, इसलिए यह डिफ़ॉल्ट रूप से सही ढंग से ढेर हो जाता है। Example।