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
- 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.
See the z-index values and the demo below:
bluebox z-index: 100
redbox z-index: 50
yellowbox z-index: 200
greenbox z-index: 10
blue box
red box
yellow box
green box
First step is to create a html file named it css_zindex.html and copy the following code:
<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>
Second step is to create a css file and named it as css_zindex.css, please place this file on the same folder of the html file you created above.
/* this is the box/outer that wrap the sample z-index boxes */ #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:blue; } /* red box css properties */ #redbox{ z-index:50; left:130px; top:130px; background-color:red; } /* yellow box css properties */ #yellowbox{ z-index:200; left:160px; top:160px; background-color:yellow; } /* green box css properties */ #greenbox{ z-index:10; left:190px; top:190px; background-color:green; }