Z-index problem at "Penguin" lesson

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;
}```

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?

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:

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.