CSS, z-index & position attribute

HTML-CSS
1

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:

<html>
    <head>
<meta charset="UTF-8">
<title>Trying out CSS</title>
    </head>
    <body>
    <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>
    </body>
  </div>
  </html>

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;
  }

Screenshot 2023-01-30 at 12.45.15
Screenshot 2023-01-30 at 12.45.15786×553 5.2 KB

Screenshot 2023-01-30 at 12.45.45
Screenshot 2023-01-30 at 12.45.45732×478 3.1 KB

Kind regards,
Inna

2

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

3

Thank you, that helps!

4

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