css problem

Question

https://code.sololearn.com/WgbLeqe2cmjR/?ref=app
So this is my code. If I wanted to use three elements, and I put them over each other why is it that when i place the second element over the first element the second element is visible but when i place the third element over the second element I can't see it.
For example, I have a div class named hair which is first and the face which is second but after placing things like the div class bang or anything else like eyes on the face then I can't see it. Is there something wrong with my code or do I just need to add something?

Answer 1

Hi athaleyah weise You can bring elements to the front with The z-index property. It only works on positioned elements.

Example: CSS
.bang {
position: absolute;
z-index: 4; /* The larger the value the closer the element is to the front. */
}

Also, You should change the color between hair and bangs so you can see them separately.