So my code is correct, but I really wonder why

Tell us what’s happening:
So about this lesson, there’s no answer, no hint for it when I clicked on Get a hint, and I somehow answered it right (Notice the z-index: 1 part in the .second one). Why is it correct???
Your code so far


<style>
div {
  width: 60%;
  height: 200px;
  margin-top: 20px;
}

.first {
  background-color: red;
  position: absolute;

}
.second {
  background-color: blue;
  position: absolute;
  left: 40px;
  top: 50px;
  z-index: 1;
}
</style>

<div class="first"></div>
<div class="second"></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Challenge: Change the Position of Overlapping Elements with the z-index Property

Link to the challenge:

Do you understand what the z-index property does?

Nope, not a single clue (I forgot literally seconds after finishing the tutorial about it), and searching Google only makes me question more.
TL:DR: I’m clueless about what it does, but somehow I finished it

There is an answer, follow the instructions in the lesson.

Some of the “Get a Hint” are being updated.

You did not answer it correctly. This is the way the lesson starts. You haven’t changed anything.
When you click the “Run the Tests” button there will be an error message showing the reason the test did not pass.

Then explain this:

And this too (notice the mark to the right of the title):
(Edit: oh wait, I accidently edited the z-index to “1”, before it was “2”, sorry)
(Edit 2: again I made an error after doing it correctly, guess the z-index was moved to .second by myself when I returned back into the same tutorial, or idk)
(Edit 3: apparently I am a mindless idiot, I opened a tab with the wrong answers instead of the one with the correct answer, and copied the code of the wrong tab)

Right, this is a free, open source project. These things don’t magically appear but happen because someone takes the time to write them out and submit them. I guess no one got around to this one yet.

However…

One of the most important skills a developer can have is the ability to google things. If I was on this, before I tried to look at the answer, I would simply google “z-index” and see what I could find.

3 Likes

Ok, but what does the “specify the stack order of an element” mean???

It means “what is visible from the top”. If you had a bunch of papers on the table, some overlapping each other, the stack order would tell you which is on top of which, which (for opaque items) tells you what is visible and what is hidden.

Why don’t you mess around with the z-index values on the two classes on that challenge?

1 Like

Add a z-index to the “first” class (actually what you are supposed to do for the challenge) and mess around with the two values and see if you can infer how they work.

Ohhh, thanks for helping me to understand the whole thing!

think about the z-index as layers of transparent sheets of paper:
a z-index of 10 is ABOVE a z-index of 9, or, 8, or …