CSS z-index Property
➢The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
➢An element can have a positive or negative stack order.
➢z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).
➢An element can have a positive or negative stack order.
➢z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
div { position: relative; z-index: 1; border: 2px solid black; height: 100px; margin: 30px; }
</head>
<body>
<div>With Z-index/div>
<p>Without Z-index/p>
</body>
</html>
<html>
<head>
div { position: relative; z-index: 1; border: 2px solid black; height: 100px; margin: 30px; }
</head>
<body>
<div>With Z-index/div>
<p>Without Z-index/p>
</body>
</html>
RESULT:
With Z-index
Without Z-index
Run
FEEDBACK
