Published on: 10 August, 2013

CSS Z-Index

Posted by andy | 2188 views 0 likes 0 favourites 0 comments
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.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.