Z-Index funktioniert nicht

Question

https://codepen.io/anon/pen/veBQYy?editors=1100

Ich habe ein div mit dem Klassenfilter. Dieses div soll das Hintergrundbild heller machen. Ich versuche, das div mit der Klasse innerlich auf den Filter zu setzen. Also habe ich z-Index: 9999 auf der inneren div aber es ist nicht an die Spitze

gehen

html, body { 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg');  
 
    background-size: cover;  
 
} 
 

 
.middle { 
 
    display: table-cell; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    text-align: center; // Center everything in div 
 
}   
 

 
/* To dim background */ 
 
.filter { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-color: black; 
 
    opacity: 0.5;  
 
} 
 

 
/* This is not working. Z index not bringing it to the top */ 
 
.inner { 
 
    z-index: 9999; 
 
} 
 

 
h1 { 
 
    color: white; 
 
}

<section class="outer"> 
 
    <div class="middle"> 
 
    <div class="filter"></div> 
 
    <div class="inner"> 
 
     <h1>Need</h1> 
 
     <h1>This to go on top zindex 9999 not working</h1> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Sie benötigen die .inner div Position relativ

.inner { 
    z-index: 9999; 
    position: relative; 
} 

z machen -index funktioniert nur bei positionierten Elementen (Position: absolut, Position: relativ oder Position: fest).

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

div.filter Der absolute positioniert Block außerhalb des normalen Strömungs gerendert. div.inner ist im normalen Ablauf. In diesem Fall müssen Sie div.filter ändern.

Wenn Sie die position -Eigenschaft in den Mix einfügen, werden alle positionierten Elemente (und ihre untergeordneten Elemente) vor nicht positionierten Elementen angezeigt. (Zu sagen, dass ein Element "positioniert" ist, bedeutet, dass es einen anderen Positionswert als statisch hat, z. B. relativ, absolut usw.).

Diese positionierten Blöcke weichen von der Stapelreihenfolge der nicht positionierten Blöcke ab. IE Z-Index: 9999; legt den nicht positionierten Block nicht oben ab. Sie können jedoch die positionierten Blöcke unter die nicht positionierten platzieren.

.filter { 
    z-index:-1; 
} 

html, body { 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg');  
 
    background-size: cover;  
 
} 
 

 
.middle { 
 
    display: table-cell; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    text-align: center; // Center everything in div 
 
}   
 

 
/* To dim background */ 
 
.filter { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    background-color: black; 
 
    opacity: 0.5;  
 
    z-index:-1; 
 
} 
 

 
/* This is not working. Z index not bringing it to the top */ 
 
.inner { 
 
    z-index: 9999; 
 
} 
 

 
h1 { 
 
    color: white; 
 
}

<section class="outer"> 
 
    <div class="middle"> 
 
    <div class="filter"></div> 
 
    <div class="inner"> 
 
     <h1>Need</h1> 
 
     <h1>This to go on top zindex 9999 not working</h1> 
 
    </div> 
 
    </div> 
 
</section>