Hello everyone. I have a problem with the Z-index. I created three objects using HTML and CSS. I write a Z-index for each of the three of them. The problem is that div3 appears second instead of first and div 2 appears first instead of second. Is the reason their order of listing in the code or something else? As far as I know, the first one from the top is always the one with the highest Z-index. But that is not the case here. What is the problem?Here is the code
<!doctype html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#div1{
width:500px;
height:500px;
background-color:blue;
position:relative;
z-index: 40;
}
#div2{
background-color:yellow;
width:700px;
height:200px;
position:relative;
z-index: -5;
}
#div3{
background-color:red;
width:700px;
height:200px;
position:relative;
z-index: 200;
}
</style>
</head>
<body>
<div id="div2">ff </div>
<div id="div3">ff
</div>
<div id="div1">ff
</div>
</body>
</html>
I will be grateful for any suggestions