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.
Here is a description of the z-index property values:
Online learning website Knowledge2life.