Chrome/Firefox-Problematik mit z-index

[kristalljunge]

Hey,

ich hab einen Header, der zum Herausstechen einen leichten Schatten hat.

.head {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 3.5%;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 1.25%;
-webkit-box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.4);
overflow-x: hidden;
position: relative;
z-index: 10;
}


Darunter ist farblicher Bereich, den ich folgendermaßen angelegt habe bzw. diese Class-Details gegeben habe:

.artikelover {
width: 100%;
position: relative;
background-color: crimson;
z-index: 1;
}

.artikelover:before {
display: block;
content: "";
padding-top: 20%;
z-index: 1;
}

In Firefox sieht man den Schatten des Headers, in Google Chrome nicht.

Wo ist mein Fehler?

 

[Aaron3219]

Firefox


Chrome


Das liegt nicht an deinem Code.