IMG-LOGO

CSS Z-Index

andy - 10 Aug, 2013 14073 Views 0 Comment

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 Blogs

How to style pagination links with CSS?

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.

Optimizing your site for printing

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 ...

Related Tutorials

What is CSS?

CSS stands for Cascading Style Sheet and is used to define of how the html elements displayed.

CSS Colors

Learn how you can can style text in different colors.