'Element with z-index is not hiding elements with lower z-index

How is this z-index formatting supposed to work? I should be able to see only the layer with z-index with 150 and not any other, but I am able to see all three layers because z-indez isn't working. How is it supposed to work?

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>z-index</title>
  <!--Problem is that the z-index is not at all working-->

</head>
<body >
  <!--first div is with highest z-index, it should be on the top layer of the screen-->
  <div  style="  background-color: #000000 ;height:1000px;width:1000px;z-index:150">
    <!--second div is with 100 z-index, it should be on the middle layer of the screen-->
    <div style=" background-color: #d0d4db;height:500px;width:500px;z-index:100;">

      <!--third div is with 50 z-index, it should be on the lowest layer of the screen-->
      <div style=" background-color: #990a0a;height:100px;width:100px;z-index:50;">
      </div>
    </div>
  </div>
</body>
</html>
htmlcssz-index


Solution 1:[1]

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

I think you need to refer this link also

https://css-tricks.com/almanac/properties/z/z-index/

Solution 2:[2]

z-index will only work together with position: relative; or position: absolute; and position:fixed

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jishnu V S
Solution 2 Jishnu V S

Related Questions