CSS - z-index Property
CSS - z-index Property
The z-index Property
CSS z-index property controls the stacking order of elements in a web page when they overlap in the same stacking context. Elements with a higher z-index value appear in front of elements with lower values.
The following diagram demonstrates the z-index layout for reference:
CSS z-index property can be used with positioned elements that are nested inside of other positioned elements.
Syntax
The syntax for z-index property is as follows:
z-index: auto | number | initial | inherit;Property Values
| Value | Description |
|---|---|
| auto | It is the default value. The stack order is equal to that of the parent element. |
<Integer> | It represents a positive or negative integer. It sets the element’s stack level to the given |
value. | | initial | It is used to set this property to it’s default value. | | inherit | It is used to inherit the property of it’s parent element. |
Applies to
All positioned elements.
CSS z-index With auto Value
CSS z-index: auto sets the z-index of an element to its parent element’s stack order. It is the default value for the z-index property.
Example
The following example demonstrates the z-index property with auto value.
CSS z-index With Positive Integer
CSS z-index property can have a positive integer value. The element with a higher integer value will appear above elements with lower values in the stacking order.
Example
The following example demonstrates the z-index property with a positive integer value.
CSS z-index With Negative Integer
You can also use negative integer values for the z-index property. An element with a negative z-index value will be stacked below elements with a higher z-index value.
Example
The following example demonstrates the z-index property with a negative integer value.
Placing Text Over Image
The z-index property can be used for placing a text over an image and vice-versa.
Example
In this example, we are placing a text over an image using CSS z-index property and position property.
CSS z-index With Sticky Position
The z-index can be used with position:sticky to fix the element’s position on scroll.
Example
In this example, we have used the sticky value with z-index property to fix the position of div boxes on scroll.
CSS z-index With Fixed Position
The z-index property is used with the position:fixed value to fix an element at the top of the content when the user scrolls down.
Example
In the example, we have used position:fixed value to fix the text content on top while scrolling.
CSS z-index With Static Position
The position:static property value makes the use of z-index property ineffective. The z-index property does not affect the stacking order of elements that have the static value of position property.
Example
The following example shows that the z-index property is ineffective when position:static property is used:
CSS z-index With Relative Position
The position:relative property can be used with z-index property to position the element relative to its original position in the document flow.
Example
The following example demonstrates use of position:relative property value with z-index property.
The example shows that when elements have the position: relative property, the z-index property positions the element relative to its original position in the document flow.