CSS z-index property
You can use the z-index
property together with the position
property to create layers like in Photoshop. Normally, HTML elements are considered 2D, having only width and height. The z-index
property introduces the new dimension — depth, and its value specifies the stack level of the box. Browsers display elements with higher values on top of elements with lower values.
In the example, the yellow element's z-index
value is 1
, and the header's z-index
value is unspecified, which defaults to 0
. As 1 is higher than 0, the yellow element overlays the header.