CSS, z-index & position attribute

Hi everyone!

I am currently experimenting with z-index and position attributes to understand better CSS.

I have stumbled upon a problem that even though I have given #red element z-index: 3, I can still see the green (z-index: 2) underneath it. However, once I give #green z-index: 3 and the #red z-index: 2, I do not see the red one anymore.

I do not understand why it happens, because algorithm is the same.

I would really appreciate your help. Thank you.

Here is the code:

<meta charset="UTF-8">
<title>Trying out CSS</title>
    <link rel="stylesheet" href="styles.css">
<div class="container">
    <div class="box" id="blue">Blue</div>
    <div class="box" id="red">Red</div>
    <div class="box" id="green">Green</div>

And CSS code:

.container { position: relative;}

#blue {
    background-color: blue; position: absolute;
    z-index: 1;
  #red {
    background-color: red; position: absolute; top: 100px; left: 100px;
    z-index: 3;
  #green {
    background-color: green; position: absolute; top: 100px; left: 100px;
    z-index: 2;

Kind regards,

Make the word red longer like Reder
And that will make the red element long enough to hide the Green

Thank you, that helps!