Bring element to front css without z-index

The CSS property is used to control the stacking order of the positioned elements. For example,

Browser Output

Here, the with the higher value stacks on top of the with the lower value.

The property only works with positioned elements and items of the flex container.

The property value should be different from the default value.

CSS z-index Syntax

The syntax of the property is as follows:

Here,

• : determines the stacking order based on the element's position in the HTML document (default value)
• : sets the stacking order of an element, negative values are allowed
• : sets the property value to the default
• : inherits the property value from the parent

Example: CSS z-index Property

Let's see an example of the property,

Browser Output

In the above example, all of the elements have a value of .

Each element also has a different value of the property.

The having a higher value is stacked on top of the other element.

Note: Elements with the same value are stacked based on their order in the HTML document.

For example, if element B

how to use z index in html