CSS z-Index: Controlling Element Stacking Order for Powerful Web Layouts
The z-index
property is a CSS property that allows you to control the vertical stacking order of elements on a web page.
The z-index
property takes a numeric value, and elements with a higher z-index
value will be displayed on top of elements with a lower z-index
value.
The default value of z-index
is auto
, which means that elements are displayed in the order in which they appear in the HTML markup.
As an example:
Editor
Loading...
In this example:
- There are two
div
elements with the classbox
. The firstdiv
has a z-index value of 1, and the second div has az-index
value of2
. - This means that the second div will be displayed on top of the first div.
- The
background-color
of the seconddiv
is also set to white, which makes it appear as if it is on top of the firstdiv
.