z_index

The z-index property in CSS controls the stacking order of elements along the z-axis (i.e., front-to-back order). It determines which elements appear in front of or behind other elements on the page.

Syntax:

z-index: <value>;

Value:Positive, negative, or 0 (e.g., 1, 100, -1).

Example

<style>

.box1 {

position: absolute;

top: 50px;

left: 50px;

width: 100px;

height: 100px;

background-color: red;

z-index: 1; /* Behind */

}

.box2 {

position: absolute;

top: 80px;

left: 80px;

width: 100px;

height: 100px;

background-color: blue;

z-index: 2; /* In front */

}

</style>

Try it yourself

Rule of using Z-index

The element must have a position value of:relative,absolute,fixed,sticky

Elements with a higher z-index will appear in front of elements with a lower z-index.

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.