CODEWITHSUNDEEP
htmlcssz-index
R.B.Singh
R.B.Singh

Reputation: 31

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>

Upvotes: 2

Views: 4164

Answers (2)

bugscoder
bugscoder

Reputation: 425

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

Upvotes: 2

Jishnu V S
Jishnu V S

Reputation: 8409

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/

Upvotes: 5

Related Questions