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.
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..
Top comments (5)
This quiz requires a deep knowledge of how CSS z-index works, we will start by applying the first four CSS rule-sets:
This will re-arrange the squares as flowing:
.blackin the most back then.greenthen.blueand 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
You expect to move the
.firsttwo 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
transformproperty you make.firsta separate layer with auto z-index, so it will behind the.seconddiv elements.And this is how it will looks in Chrome DevTool Layers Panel
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!