The z-index
property in CSS is used to control the stacking order of elements on the web page along the z-axis (the third dimension, which is perpendicular to the screen). Elements with a higher z-index
value are stacked above elements with a lower z-index
value. The z-index
property only works on positioned elements (those with a position of relative
, absolute
, fixed
, or sticky
).
You can set the z-index
property like this:
Here are some examples to illustrate the use of z-index
:
In this example, .box2
is placed above .box1
because it has a higher z-index
value.
A negative z-index
value places the element behind other elements.
By using the z-index
property, you can control the stacking order of elements to achieve the desired layout and visual effects. Let me know if you need more details or examples!