Experimental Css design: tutorial - positioning

Stacking order and z-index

When you are in the process of positioning, you will inevitably run into the fact that you have elements in a place where another element also wants to be. Hence they will overlap each other. So you want to have something that controls which element will be on top. That's why there's something called the z-index.

The z-index only applies to positioned elements. Using the z-index allows you to alter the way in which elements overlap each other.

An element with a higher z-index appears in front of an element with a lower z-index. When two elements have the same value (or if neither has been assigned a value) the source order is used. You can use negative values for z-index. In this case the element will be displayed behind any that has an undefined or positive z-index value in the same stacking context.

Using negative Z-index isn't recommended because of browser problems: Mozilla for instance doesn't do negative z-indices.

When you use z-index, you don't have to use contiguous values. If, for instance, you want to make sure that an element is always on top (in front of anything else), you can give it a value of 5000.

Stacking order

Watch the stacking order demo.

Once you have given the element a value (other then auto) it establishes its own local stacking context. In other words, all of the elements descendants have their own stacking order, relative to the ancestor element.

Summary

There are really three tricks to positioning: knowing how positioned elements relate to their containers, knowing how z-indices relate to each other, and keeping track of which element is in which container.

Keeping track of which element is in which container, can be easy if you write your code in a fluent way: use code indenting. That way you know where an opening div is closed just by looking down the screen in a straight line. You can get lost in the code if all of the div's were against the left margin.

As far as how positioned elements relate to their containers, it's pretty straightforward, as long as you can keep track of who's contained in who.

Absolute element positions and dimensions are based upon the dimensions and position of the nearest ancestor that is also positioned. Even if a positioned element is inside 100 unpositioned div's that have their own widths and heights, they don't make a difference to the positioned element. Only a positioned element makes a difference, and only that outer positioned element defines the child positioned element.

When it comes to z-indices, only positioned elements will use z-index. Unpositioned elements won't: they act like they had a z-index of 0. Also, z-indices only order items in the same positioned ancestor, relative to that ancestor. Layers from different containers won't overlap each other.

If you want to put one element on top of another element that has a different containing block, you need to increase the z-index for the first element's containing block.

As an example, the following code:

div {position: absolute;}

<body>
<div id="a" style="z-index: 1">
<div id="aa" style="z-index: -10"></div>
<div id="ab" style="z-index: 100"></div>
</div>
<div id="b" style="z-index: 10"></div>
</body>

would stack like this:

top of stack b ab a aa body bottom of stack

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

Stacking order and z-index

Stacking order

Summary

More Pages

Friends