Bir esnek kutu kapsayıcısında boşluk bırakan bir div'i bindirmeye çalışıyorum.

Question

Başlık, bir esnek kutu kabıdır ve kabında çalışan üç adet esnek kutu div vardır. Bindirme Diğer üç div'u kaplamak istiyorum ama yine de .header flexbox container div içinde kısıtlı olmak istiyorum.

Yığınlama akışında ve başka yerlerde birden çok yöntem denedim, ancak birleşik esnek kutuda kullanıldığında kaplama veya katmanlamayı ele alan bir çözüm nasıl görülemiyor.

Önerileriniz için teşekkür ederiz! Link

HTML:

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

CSS: Aşağıdakilerden jsfiddle için

Bağlantı

.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

sizin dışarı yorumladı tüm kod baktığımızda, doğru yolda olduğumuzu Flex kabındaki göreceli konumlandırma ile. Sadece kaplama elemanınızı kesinlikle konumlandırmanız gerekiyordu.

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

Ekleme/açıklamasız bu stilleri:

.header { 
    position: relative; 
} 

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