CSS Z-INDEX

rainbow baker

 CSS Z-INDEX

  • 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.
  • z-index only works on positioned element(position: absolute, position: relative, position: fixed, or position: sticky) 
  •  flex items(elements that are direct children of display: flex elements).

EXAMPLE:

<!DOCTYPE html>
<html>
<head> 
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</head>
<body>
<h1>This is a heading</h1>
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

OUTPUT:
        This is heading





  


Tags
Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send