Published on: 10 August, 2013

CSS Z-Index

Tumblr Digg Google Plus

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

  1. the z-index element has to be in absolute position in order to work properly.
  2. 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;
}

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.