Z-index problem at "Penguin" lesson

HTML-CSS
#1

I would like to know why the z-index for the .penguin-head should be 1 (according to requirements). I looked for the .penguin-body value (it was not specified) so I went to the parent .penguin to check it`s value as reference. The z-index is 4 for the .penguin, so I assumed that for the son is the same, which made necessary for the .penguin-head a value of at least 5 to be on top of the body. The value 5 was not accepted as a valid value, even if the image was displayed as it should be. Does someone know the reason for this discrepancy?

 background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100vh;
 overflow: clip;
}

.left-mountain {
 width: 300px;
 height: 300px;
 background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
 position: absolute;
 transform: skew(0deg, 44deg);
 z-index: 2;
 margin-top: 100px;
}

.back-mountain {
 width: 300px;
 height: 300px;
 background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
 position: absolute;
 z-index: 1;
 transform: rotate(45deg);
 left: 110px;
 top: 225px;
}

.sun {
 width: 200px;
 height: 200px;
 background-color: yellow;
 position: absolute;
 border-radius: 50%;
 top: -75px;
 right: -75px;
}

.penguin {
 width: 300px;
 height: 300px;
 margin: auto;
 margin-top: 75px;
 z-index: 4;
 position: relative;
}

.penguin * {
 position: absolute;
}

.penguin-head {
 width: 50%;
   height: 45%;
 background: linear-gradient(
   45deg,
   	gray,
   	rgb(239, 240, 228)
   );
   border-radius: 70% 70% 65% 65%;
 top: 10%;
 left: 25%;
 z-index: 1;
}

.penguin-body {
 width: 53%;
 height: 45%;
 background: linear-gradient(
   45deg,
   	rgb(134, 133, 133) 0%,
   	rgb(234, 231, 231) 25%,
   	white 67%
   );
 border-radius: 80% 80% 100% 100%;
 top: 40%;
 left: 23.5%;
}

.ground {
 width: 100vw;
 height: 400px;
 background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
 z-index: 3;
 position: absolute;
 margin-top: -58px;
}```
#2

Funny, I also picked this up when I was doing the challenge. I’m not sure why :confused:
I can give you my best guess, that POSSIBLY our assumption that z-index is passed down to children elements is incorrect. MAYBE the z-index is not passed down?
If it isn’t passed down then it gets treated with default z-index of 0… which seems to be the case here?

#3

Thank you for your input, it made me dig a bit more into the matter. It seems that z-index works ONLY if you have a position stated (ex: absolute, relative, etc) and should parents and children share this property it does indeed matter your z-index value. But in this case we have .penguin {position: relative;} and .penguin * {position: absolute;}. If I understand correctly in this case for different positions for parent and child z-index for the parent doesn`t matter for the child but only for other elements outside of it. So in this case we have the .penguin children basically starting with z-index=0 unless otherwise stated. So if I set z-index=1 for .penguin-head it is more than for the .penguin-body and it goes on top of it.
This convoluted explanation is the best I have for the moment :slight_smile:
PS. this is a link I used:

#4

I will apply your theory in future and let you know! Thanks for the explanation.