: before et: after de pseudo-éléments présentant un comportement déroutant - html, css, css3, pseudo-élément

Je m’applique un ::après pseudo-élément sur un conteneur div. Le pseudo-élément définit une couleur de fond, 0 haut, 0 gauche, 100% largeur et hauteur. À l'intérieur de la div, la hauteur est fixée à 200px. Cette combinaison HTML / CSS a pour résultat que la couleur d'arrière-plan recouvre la totalité du div imbriqué qui est enfermé et que la hauteur et la largeur ajoutées sont spécifiées.

Cependant, si je supprime ::après, la couleur de fond est insérée, mais pas au-dessus de la div imbriquée, ce qui semble complètement contre-intuitif. Pourquoi utiliser le ::après (ou ::avant) le pseudo-élément entraîne le contenu couvrant la div imbriquée, tandis que son utilisation n’a pas pour résultat que la div imbriquée passe par-dessus la superposition? Ne devrait-il pas "après", cela signifie APRÈS le contenu?

 .container1 {
position:relative;
height: 100%;
}

.overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: hsla(211, 100%, 18%,.6);
z-index: 2;
width: 100%;
height: 100%;
}

#hero {
height: 200px;
background: url(https://preview.ibb.co/nRxrBS/hero_truck_lg.jpg) no-repeat;
}

<div class="container1 overlay">
<div id="hero"></div>
</div>

Réponses:

Vous avez plusieurs objets qui interfèrent les uns avec les autres. Mais je pense que votre problème principal est le suivant:

position:absolute; extrait les éléments de l'ordre de rendu, les faisant s'afficher par-dessus les éléments statiques.