loading...
Cover image for Quick CSS Quiz #5

Quick CSS Quiz #5

ismail9k profile image Abdelrahman Ismail Updated on ・1 min read

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth.

The problem:

<div class="first">
    <div class="red"></div>
    <div class="green"></div>
</div>
<div class="second">
    <div class="blue"></div>
    <div class="black"></div>
</div>
.red, .green, .blue, .black {
    position: absolute;
    width: 200px;
    height: 200px;
}
.red {
    background: red;
    top: 0;
    left: 0;
}
.green {
    background: green;
    top: 50px;
    left: 50px;
}
.blue {
    background: blue;
    top: 100px;
    left: 100px;
}
.black {
    background: black;
    top: 150px;
    left: 150px;
}

The previous code snippets, for four squares positioned on top of each other, every square slightly moves to the left from the previous square's position so you can easily spot which one is on top of which.

aligned squares

squares positioned on top of each other

If I use the following snippet to re-arrange the squares rendering order, what will be the final order of the squares form back to front?

.red { z-index: 100; }
.blue { z-index: 50; }
.green { z-index: 2; }
.black { z-index: 0; }
.first { transform: translateZ(10px); }

Options:

  • red, green, blue, black
  • black, blue, green, red
  • green, red, black, blue
  • black, green, blue, red

The answer:

you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.






πŸ‘‡πŸ‘‡πŸ‘‡





The correct answer is: green, red, black, blue
If you wonder why this is the correct answer, please read the discussions below, I'll post the answer soon..

Posted on by:

Discussion

markdown guide
 

This quiz requires a deep knowledge of how CSS z-index works, we will start by applying the first four CSS rule-sets:

.red { z-index: 100; }
.blue { z-index: 50; }
.green { z-index: 2; }
.black { z-index: 0; }

This will re-arrange the squares as flowing: .black in the most back then .green then .blue and finally the '.red' at the top, this arrange is intuitive, an element with a larger z-index covers an element with a lower one.
But when you add the final rule-set

.first { transform: translateZ(10px); }

You expect to move the .first two square (red and green squares) to be on top of the other squares (black and blue squares), but you got a completely different output, and the z-index now is completely unreasonable.

CSS has layers which is slightly looks like the Photoshop layers (surprise), z-index arrange elements within that layer, larger z-index element on top and the smaller on bottom, that's what happened when you added transform property you make .first a separate layer with auto z-index, so it will behind the .second div elements.

And this is how it will looks in Chrome DevTool Layers Panel

Squares

 

That's a good one, I almost fell for the seemingly logical solution without giving it a proper thought, but in the end I got it. 😁

green and red are children of first, red has, with a 100, the higher index than green with its 2 and therefore is on top of green.
black and blue are children of second, blue with 50 has the higher index than black with 0 and therefore is in the front.

 

Oh, that is very clever. I should've read the HTML first before I made my answer.

 

What was your answer? and can you guess why they are arranged in this way? πŸ˜„

 

Well, at first, I chose the intuitive answer. I'm sure you know what I mean by that. Then when I scrolled down to see the actual answer, it took me a while to realize that the HTML structure played a huge part in the z-indices of the divs. I should really look more carefully next time. Looking forward to more of your puzzles!