ओवरले/फ्लेक्सबॉक्स कंटेनर div

Question

में एक div को होवर करें मैं एक div को ओवरले करने की कोशिश कर रहा हूं जो एक फ्लेक्सबॉक्स कंटेनर में तैरता है।

हेडर एक फ्लेक्सबॉक्स कंटेनर है और इसमें तीन फ्लेक्सबॉक्स divs हैं जो कंटेनर में काम करते हैं। ओवरले मैं अन्य तीन divs ओवरले करना चाहता हूं लेकिन अभी भी .header flexbox कंटेनर div के भीतर बाध्य होना चाहिए।

मैंने स्टैक ओवरफ्लो और अन्यत्र पर कई विधियों का प्रयास किया है, लेकिन एक समाधान को नहीं देखा गया है जो संयोजन फ्लेक्सबॉक्स में उपयोग किए जाने पर ओवरले या लेयरिंग को संबोधित करता है।

किसी भी सुझाव के लिए धन्यवाद! Link

एचटीएमएल:

<div class="header"> 
    <div class="headerLeft">Left</div> 
    <div class="headerMiddle">Middle</div> 
    <div class="headerRight">Right</div> 
    <div class="overlay">Overlay</div> 
</div> 

सीएसएस: निम्न में से jsfiddle को

लिंक

.header { 
    border: 3px solid orange; 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    z-index: 0; 
} 

.headerLeft { 
    border: 2px solid chartreuse; 
    -webkit-flex: 1; 
    flex: 1; 
    z-index: 1; 
} 
.headerMiddle { 
    border: 2px solid darkorchid; 
    -webkit-flex: 1; 
    flex: 1; 
    z-index: 1; 
} 
.headerRight { 
    border: 2px solid darkorange; 
    -webkit-flex: 1; 
    flex: 1; 
    z-index: 1; 
} 

.overlay { 
    border: 2px solid green; 
    z-index: 10; 
    background: rgba(0,0,0,0.3); 
} 

Answer 1

अपने बाहर टिप्पणी की कोड के सभी को देखते हुए, आप सही रास्ते पर थे फ्लेक्स कंटेनर पर सापेक्ष स्थिति के साथ। आपको बस अपने ओवरले तत्व को पूरी तरह से स्थापित करने की आवश्यकता है।

http://jsfiddle.net/UHECE/4/

जोड़ें/हटाएं इन शैलियों:

.header { 
    position: relative; 
} 

.overlay { 
    position: absolute; 
    left: 0; top: 0; right: 0; bottom: 0; 
}