Sözde sınıf - z-endeksi ile tam genişlik arka plan öğesi?

Question

DÜZENLEME: Ana öğenin z-endeksini sildiğimde çalıştığımı öğrendim. Her neyse ... bunu başarmak için daha az "hack" yolu var mı? Çalışır ama gerçekten çok hackish hisseder.

Ortalanmış% 50 sıranın arkasında tam genişlikte bir sahte öğe oluşturmaya çalışıyorum. Düzgün çalışır (kod olsa çok hackish görünüyor) ama kendi üst arkasında sözde elemanları z-index alamayan:

html, body { 
    height: 100%; 
    margin: 0; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

.content { 
    background-color: blue; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    width: 50%; 
    z-index: 1; 
    padding: 2em; 

    &:after { 
     content: ""; 
     display: block; 
     height: 100%; 
     left: -50vw; 
     opacity: .7; 
     position: absolute; 
     right: 0vw; 
     top: 0; 
     width: 200vw; 
     z-index: -1; 
     border: 10px solid green; 
     box-sizing: border-box; 
     background-color: tomato; 
    } 
} 

mi:

> Visit codepen-battleground here.

Bu SCSS kodudur Bunu yapmak için bir numara var mı? Çalışmayı çok isterim.

Answer 1

Ebeveyn üzerinde z-index'u kaldırırsanız, çalışır.

Ayrıca, merkezleme çözümünü değiştirdim, böylece vücuttaki taşma kaydırması kaldırılabilir.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.content { 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 50%; 
 
    padding: 2em; 
 
} 
 
.content:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100vw; 
 
    transform: translateX(-50%); 
 
    z-index: -1; 
 
    opacity: .7; 
 
    box-sizing: border-box; 
 
    background-color: tomato; 
 
}

<div class="content"> 
 
    <strong>This should go to front so it's <em>blue</em> not lilac</strong> - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
</div>