Home arrow Style Sheets arrow CSS z-index Property Tutorial
STYLE SHEETS

CSS z-index Property Tutorial


Let’s face it: the web is a creature that evolves at a very fast pace. At this time it is essentially a 2D world, where the position of an HTML element in a browser’s window is in many cases determined and controlled by its X, Y coordinates. It seems that in such a world, the existence of a third coordinate (or, a third axis) seems to have little or no relevance, at least when it comes to creating CSS layouts. In this article, we will try and prove this theory wrong via the use of the CSS z-index property.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
June 07, 2011
TABLE OF CONTENTS:
  1. · CSS z-index Property Tutorial
  2. · Positioning HTML Elements Absolutely with z-index
  3. · Using relative/absolute with z-index

print this article
SEARCH DEVARTICLES

CSS z-index Property Tutorial
(Page 1 of 3 )

As soon as you need to overlap web page elements in a specific order, you will know that there is indeed a place for this third axis. Even though many of the existing websites that you’ll see out there (or the ones that you built on your own) are comprised of elements that don’t overlap with each other, sooner or later you’ll find yourself tackling a project that will require the use of an overlapped layout.

Fortunately, CSS comes bundled with the handy “z-index” property, which permits you to stack elements in different layers over the Z axis, thus introducing the notion (event though quite primitive) of 3D in the terrain of web design.

In reality, the logic that stands behind the “z-index” property can be grasped in a snap: put in a simple way, elements that have a greater value for this property will be placed on top of the ones that have lesser values. That’s about it. However, it’s valid to point out that the tricky part of this stacking process is that to get it working as expected, the stacked elements must be positioned either relatively or absolutely in the (X)HTML document. Otherwise, the property will have no effect in the final rendering process.

Considering that you want to learn how to start using the “z-index” property on your web pages, or simply fill some gaps that you still might have on it, in this tutorial I’ll be setting up some comprehensive examples that will put you on the right path quickly. And if my proposal still doesn’t convince you to start reading, you’ll learn how to utilize the property with relative and absolute positioning, all in one single layout.     

When the “z-index” property has no effect: using non-positioned HTML elements

As I explained in the introduction, the use of the “z-index” property is very straightforward, as long as you assign the property in question to elements that have been positioned relatively or absolutely on the web page. Of course, there exists the possibility that you’re not completely convinced of this, or that you simply want to see an example where the property is utilized without fulfilling this requirement.

In a case like this, take a look at the following (X)HTML document, which includes three non-positioned divs that have been assigned a different value for their “z-index” property. Pay attention to it:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the 'z-index' CSS property</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;g
    background-color: #fff;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #666; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
#container-a {
    width: 350px;
    padding: 20px;
    background-color: #ffffc0;
    z-index: 1;
}
#container-b {
    width: 350px;
    padding: 20px;
    background-color: #c0ffc0;
    z-index: 2;
}
#container-c {
    width: 350px;
    padding: 20px;
    background-color: #c0ffff;
    z-index: 3;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <div id="container-a">
           <h2>Container A</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </div>
        <div id="container-b">
           <h2>Container B</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </div>
        <div id="container-c">
           <h2>Container C</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </div>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

The above web page contains three trivial containers, identified as “container-a”, “container-b” and “container-c” respectively, which have distinct values for their “z-index” property. In theory, the assignation of the property should cause the elements to be stacked along the Z axis in a logical order - that is the one with a greater value would be rendered on top of the others. In practice, however, things are a little bit different, as the containers haven’t been positioned neither relatively nor absolutely in the document.

The following image shows pretty clearly how the divs are currently displayed on screen: 

There you have it. Even when each element has a different order in the Z axis, in this case no overlap occurs, as the elements follow the normal rendering flow. But fear not, as I stated before, this can be easily addressed by positioning the divs relatively or absolutely.

Thus, assuming that you want to see how the “z-index” property can be used for creating an overlapping effect, in the next section I’ll be amending the previous example, which this time will assign an absolute position to the target elements.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials