CSS Z-index Property

The z-index property in CSS is used to control the vertical stacking order of elements on a webpage. It specifies the element's position along the z-axis, which is perpendicular to the screen.

What is z-index?

When two or more elements overlap, the z-index property determines which one appears on top of the other. The element with a higher z-index value appears on top of the element with a lower z-index value. If two elements have the same z-index value, the one that appears last in the HTML markup appears on top.

The z-index property can be applied to any element that has a position property value of absolute, fixed, or relative.

Example

Here is an example of how to use the z-index property:

div {
 position: relative;
 z-index: 1;
}
p {
 position: relative;
 z-index: 2;
}

In this example, the p element has a higher z-index value than the div element, so it will appear on top of the div element if they overlap.

It's important to note that the z-index property only works on positioned elements, meaning those with a position value of absolute, fixed, or relative. If an element does not have a positioned property, the z-index property will have no effect.

In conclusion, the z-index property is a powerful tool for controlling the layout of your webpage, especially when it comes to overlapping elements. By using the z-index property, you can create visually engaging and dynamic layouts that adapt to different screen sizes and devices.