The z-index property specifies the stack order of an element. z-index is a css property that allows to position an object/element in front/behind of other elements. Important notes that you will need to understand about z-index properties. many time developer face issue z-index not working
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
- the z-index element has to be in absolute position in order to work properly.
- An element with greater value number/order is always positioned above the element with a lower value number/order.
<!DOCTYPE html>
<html>
<head>
<title>css : z-index</title>
<style>
#boxwrapper{
width:100%;
height:400px;
position:relative;
border:solid 1px #666666;
}
/* color boxes, each individual box shared the same css properties */
#bluebox, #redbox, #yellowbox, #greenbox{
position:absolute;
border:solid 1px black;
width:150px;
height:150px;
}
/* blue box css properties */
#bluebox{
z-index:100;
left:100px;
top:100px;
background-color:#5507f2;
}
/* red box css properties */
#redbox{
z-index:50;
left:130px;
top:130px;
background-color:yellow;
}
/* yellow box css properties */
#yellowbox{
z-index:200;
left:160px;
top:160px;
background-color:deeppink;
}
/* green box css properties */
#greenbox{
z-index:10;
left:190px;
top:190px;
background-color:#73f700;
}
</style>
</head>
<body>
<link href="css_zindex.css" type="text/css" rel="Stylesheet" />
<div id="boxwrapper">
<div id="bluebox"></div>
<div id="redbox"></div>
<div id="yellowbox"></div>
<div id="greenbox"></div>
</div>
</body>
</html>
