Prev Page Next Page
Top

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).

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>

RESULT:

With Z-index

Without Z-index

Run


Prev Page Next Page





FEEDBACK

Rating


Message