CSS: how to use the z-index property

A couple of weeks ago we looked at CSS properties which relate to elements and their positioning inside a document. Specifically, how the absolute placement is used and how fixed placement works. In this last article we provided you with a preview of the z-index”  property, used to arrange the overlapping elements inside a document.

In today’s article we’ll look take a closer look at this property, which contains CSS2 specifications.

What’s the use of the z-index property?

The “z-index” property serves to stabilize the order of elements which are in overlap.

What are overlapping elements?

In the usual structure of a document, two elements can be overlapping one another if they are positioned using the “position” property. In this way – as we’ve seen in several previous articles – they are no longer dependent on the structure of the document and they can be positioned based on the provided coordinates.

Based on the coordinates provided, elements can result in an overlap if they are positioned on the same position on the screen.

When an element is positioned using the “position” property, by using the “top”, “left”, “right” or “bottom” property coordinates are provided which detail where an element needs to be placed in relation to the X and Y axis of the screen.

What are depth levels?

CSS2 specifications have introduced a third dimension which indicates the depth levels of various elements: the Z axis (imagine a straight perpendicular line that extends from the lower edge of your screen). It’s possible to associate a third value - other than the standard set of coordinates needed to position an element on the X and Y axes of the screen – which serves to define the eventual order of overlap on the Z axis.

How do you set the depth level of an element?

Using the z-index” property it’s possible to define the depth level and the overlapping order of the desired elements.

Which values can the z-index property take on?

The “z-index” property can adopt the following values:

  • internal type values: they can be negative, the larger integer indicates that the element (in case of overlap) is shown over the element which has a lower value;
  • auto: this is the default setting and it attributes the same value to both the element and the parent, if no value is defined for the parent then the value is zero (0);
  • inherit: defines that a value should be inherited from its own parent.

Moving from theory to practice

Let’s look at some examples to clear any doubts.

Try to position due boxes inside our document, so that they are overlapping one another. Using the “z-index” property, let’s try to change the order of this overlap.

The html markup we are going to use is the following:

<p class="box-one">
    <strong>BOX 1</strong> is located under box 2.<br/>
    We've positioned box 2 so that it overlaps with box 1.
</p>

<p class="box-two">
    As you can see <strong>BOX 2</strong> is found above box 1.
</p>

These are two rules you need to associate to a document’s stylesheet in order to create an overlap effect with the two boxes:

p.box-one {
    width:300px;
    height:100px;
    background:#dad7d7;
    padding:10px;
}
p.box-two {
    width:300px;
    height:100px;
    background:#ffe7bc;
    padding:10px;
    position:relative;
    top:-80px;
    left:150px;
}

Briefly, we’ll explain the changes made in the code:

  • in the first paragraph we’ve assigned a class referred to as “box-one” and set the corresponding rule in the stylesheet, assigning length, height, background color and a 10 pixel padding on all sides so that the text is shown starting from the border of the assigned box.
  • in the second paragraph we’ve assigned a class referred to as “box-two” and set the corresponding rule in the stylesheet, assigning length, height, background color, padding and we’ve taken it away from the usual structure of the document by using the “position”, “top” and “left” properties in order to create an overlap over the first box.

It looks great and as you can see we’ve successfully created the desired effect, the two boxes are overlapping and the second box overlaps over the first one.

How do I invert the order of overlap between the two boxes?

If our goal is to visualize BOX 1 over BOX 2, you’ve probably figured out that by using the “z-index” property this can be done quite easily. In fact, all one has to do is set the “z-index” property to BOX1 with a value greater than the one set for BOX2.

Let’s add the “z-index” property in our stylesheet to the class referred to as “box-one”:

p.box-one {
    width:300px;
    height:100px;
    background:#dad7d7;
    padding:10px;
    z-index:10;
}

If you look at the results of this second example, you will note that nothing has changed from the first one.

What went wrong?

The “z-index” property can only be applied to elements which are positioned, so in order to apply it to an element, the element needs to have “position” property set to a different value than da “static”, which in turn is the default value for each element in our document.

At this point all we have to do is add the “position” property to our class, then set it to “relative” (without adding coordinates as they are not needed, what we need is the order of overlap):

p.box-one {
    width:300px;
    height:100px;
    background:#dad7d7;
    padding:10px;
    z-index:10;
    position:relative;
}

Magically, the “z-index” property created the desired effect in the box order of overlap.

Just to clear any last doubts

If you’re asking yourself why we’ve set the “z-index” property exacly to ten, the answer is simple: actually there’s no reason, it can be assigned any whole number just as long as its greater than the value assigned to the “z-index” property in box2.

You’ve probably noticed that box2 has no defined “z-index”, consequently it will take the default value which we set to “auto”, meaning the value set for the parent element, which in turn happens to be zero as no “z-index” exists for the parent element.

If would have been enough to assign one (instead of ten) to the “z-index” property in box1 to obtain the same effect. One, being greater than zero, is enough to create the same effect. You should try this out if you’re curious.

Conclusion

We’ve just finished looking at another great property which can be used through CSS specifications. Even if it might look hard to use at the beginning, we assure you that once you’ve learned how to use it – together with the other properties relative to the element’s positioning – you will no longer have any problems in developing a markup to use as a visualization tool for everything that your creative department has created, this is why sometimes war can ensue between creative heads and developers.

Recommended Readings

Here we’ve listed several interesting articles on the subject in case you want to know more:

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

21 comments

  1. apipkin
  2. Renga
  3. Muhammad Raza Ali Khan
  4. Peter McCartney
  5. pat
  6. divine

Trackback e pingback

  1. Tweets that mention CSS: how to use the z-index property | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Paul, Antonino Scarfì and Tom Bangham, V. Tavares (E-Goi). V. Tavares (E-Goi) …

Leave a Reply

Current day month ye@r *