z-index

Understanding z-index

z-index determines the stack order of elements on a webpage. Elements with a higher z-index will be displayed in front of those with a lower index.

• Default Value: The default value is 0.

• Stacking Context: Only positioned elements (position: relative, absolute, fixed, sticky) with a defined z-index form a stacking context.

• Auto Value: Setting z-index to auto places the element in the same stacking context as its parent.

• Hierarchy: In situations where two elements have the same z-index, the HTML order determines the stacking, with the latter one appearing on top.

• Negative Values: Elements can have a negative z-index, positioning them behind the parent elements.

Possible Values

we have given a step input control by which user can increase or decrease the value of z-index. It can be any positive or negative number.

Example

1. Let's place two child block containers inside a parent container and set their position values appropriately. Initially, it will look like this:

1. Now, we set the z-index values for both child elements: child1 to 2, and child2 to 1.