CSS Zindex

Z index

This property is used to define the order of elements on the z-axis. It can take two values:

auto- The element is placed at the same level as that of the parent element.
integer- The element is placed at the stack level specified.

z-index mainly affects the elements having a position value instead of a static and default value. Thus, elements might overlap because of various reasons, including relative positioning, negative margin, absolute positioning, or any other. However, without using z-index values, the elements stack precisely in the order of their appearance in the DOM. Also, the elements without any static positioning appear on top of the elements having a default static position.
The elements having greater stack order are always in front of the ones with a lower order.

Note:  z-index only affects the positioned or the flex items.

Critical properties of z-index:

  • The default value of an item for z-index is set to auto.
  • The z-index property is not inheritable.
  • The z-index property can be animated.
  • It is available in CSS2 and newer versions.
  • The JavaScript syntax for using z-index is: object.size.zIndex = “-1”.

Property values of z-index:

Here is a description of the z-index property values:

  • auto: It is used for setting the stack order equal to the parent of the element.
  • number: It is used for setting the stack order of the element. It can also have a negative value.
  • initial: It is used for setting the property to its default value.
  • inherit: It is used for inheriting the property from the parent element.

Example:

<html> <html lang="en-US"> <style> img { position: absolute; left: 0px; top: 0px; z-index: -1; } .gold-box { position: absolute; z-index: 1; background: gold; width: 20%; left: 30px; top: 4em; } </style> </head> <body> <h1>Knowledge2life</h1> <img class="gold-box" width="30" height="40"> <p>Online learning website Knowledge2life.</p> </body> </html>

OUTPUT:

Image Not Found