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!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.