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;
}
Kind regards,
Inna