While Mr. Moll and Mr. Budd have pipped me to the post with their predictions for 2006, I’m sure they won’t mind if I sneak in another. The use of positioning together with z-index will be one of next year’s hot techniques
Both has been a little out of favour recently. For many, positioned layouts made way for the flexibility of floats. Developers I speak to often associate z-index with Dreamweaver’s layers feature. But in combination with alpha transparency support for PNG images in IE7 and full implementation of position property values, the stacking of elements with z-index is going to be big. I’m going to cover the basics of z-index and how it can be used to create designs which ‘break out of the box’.
No positioning? No Z!
Remember geometry? The x axis represents the horizontal, the y axis represents the vertical. The z axis, which is where we get the z-index, represents /depth/. Elements which are stacked using z-index are stacked from front to back and z-index is only applied to elements which have their position property set to relative or absolute. No positioning, no z-index. Z-index values can be either negative or positive and it is the element with the highest z-index value appears closest to the viewer, regardless of its order in the source. Furthermore, if more than one element are given the same z-index, the element which comes last in source order comes out top of the pile.
Let’s take three <div>s.
#one {
position: relative;
z-index: 3;
}
#two {
position: relative;
z-index: 1;
}
#three {
position: relative;
z-index: 2;
}
As you can see, the <div> with the z-index of 3 will appear closest, even though it comes before its siblings in the source order. As these three <div>s have no defined positioning context in the form of a positioned parent such as a <div>, their stacking order is defined from the root element <html>. Simple stuff, but these building blocks are the basis on which we can create interesting interfaces (particularly when used in combination with image replacement and transparent PNGs).
Brand building
Now let’s take three more basic elements, an <h1>, <blockquote> and <p>, all inside a branding <div> which acts a new positioning context. By enclosing them inside a positioned parent, we establish a new stacking order which is independent of either the root element or other positioning contexts on the page.
<div id="branding">
<h1>Worrysome.com</h1>
<blockquote><p>Don' worry 'bout a thing...</p></blockquote>
<p>Take the weight of the world off your shoulders.</p>
</div>Applying a little positioning and z-index magic we can both set the position of these elements inside their positioning context and their stacking order. As we are going to use background images made from transparent PNGs, each element will allow another further down the stacking order to show through. This makes for some novel effects, particularly in liquid layouts.
(Ed: We’re using n below to represent whatever values you require for your specific design.)
#branding {
position: relative;
width: n;
height: n;
background-image: url(n);
}
#branding>h1 {
position: absolute;
left: n;
top: n;
width: n;
height: n;
background-image: url(h1.png);
text-indent: n;
}
#branding>blockquote {
position: absolute;
left: n;
top: n;
width: n;
height: n;
background-image: url(bq.png);
text-indent: n;
}
#branding>p {
position: absolute;
right: n;
top: n;
width: n;
height: n;
background-image: url(p.png);
text-indent: n;
}Next we can begin to see how the three elements build upon each other.
1. Elements outlined
2. Positioned elements overlayed to show context
3. Our final result
Multiple stacking orders
Not only can elements within a positioning context be given a z-index, but those positioning contexts themselves can also be stacked.
Two positioning contexts, each with their own stacking order
Interestingly each stacking order is independent of that of either the root element or its siblings and we can exploit this to make complex layouts from just a few semantic elements. This technique was used heavily on my recent redesign of Karova.com.
Dissecting part of Karova.com
First the XHTML. The default template markup used for the site places <div id="nav_main"> and <div id="content"> as siblings inside their container.
<div id="container">
<div id="content">
<h2></h2>
<p></p>
</div>
<div id="nav_main"></div>
</div>By giving the navigation <div> a lower z-index than the content <div> we can ensure that the positioned content elements will always appear closest to the viewer, despite the fact that the navigation comes after the content in the source.
#content {
position: relative;
z-index: 2;
}
#nav_main {
position: absolute;
z-index: 1;
}Now applying absolute positioning with a negative top value to the <h2> and a higher z-index value than the following <p> ensures that the header sits not only on top of the navigation but also the styled paragraph which follows it.
h2 {
position: absolute;
z-index: 200;
top: -n;
}
h2+p {
position: absolute;
z-index: 100;
margin-top: -n;
padding-top: n;
}
Dissecting part of Karova.com
You can see the full effect in the wild on the Karova.com site.
Have a great holiday season!
About the author
Andy Clarke is a designer and consultant. He is creative director of Stuff and Nonsense, a design agency focusing on creative, accessible web development. Andy is passionate about design and passionate about Web Standards, often bridging the gap between design and code. He is a member of The Web Standards Project and writes about design and popular culture on his personal web site, And All That Malarkey.
Comments
16/12/2005
Beautimous as always Andy.
16/12/2005
Sure, Z will still be alive, like now, we can only spice up the flexibility by the long-awaited transparency. If you can live with 1bit transparency, you can play around with it the same way now (and many of us did so in the the past).
However, it’s always nice to refresh the possibilities.
16/12/2005
Zed’s dead :-) baby :)
16/12/2005
Nice overview. There’s no doubt that the way all of us work will change the day that we can reliably count on alpha-transparent PNGs to work properly for the vast majority of our users. The combination of alpha PNG and z-index gives us the basis for Photoshop-like layering, which obviously will do wonders for us as graphic designers on the web.
Can’t wait. :)
16/12/2005
Fantastic Andy, fantastic!. Thank you so much.
16/12/2005
shite, this is a good one!!
16/12/2005
“everything’s gonna to be alright”?!? :)
16/12/2005
Well, thats intresting. :) Done nicely.
16/12/2005
Thanks, it’s nice to see it clearly broken down like that. The first “branding” (I knew it was you Andy when I saw #branding instead of #header ;) example with the three elements playing together to form one logobox (#3) really just tied the whole thing together for me.
On a sidenote, interesting usage of the accessibility container for the bubbly circles over at karova. No extraneous markup huh?
16/12/2005
I’d sort of abandoned ‘Z’ cos I found the positioning to be a bit erratic across browsers…but maybe I should give it another go eh? I wonder if it will play nice with older browsers (not everyone and their dog will be on IE7 overnight…at first).
This is the first time I’ve seen an article make use of the Z-index for positioning major page elements though…and that’s quite refreshing really! Maybe it really is Z’s moment to return and do some wonderful things?! :)
Plus: Best wishes to Karova for 2006.
16/12/2005
Well done, Andy!
But remember: in IE/Win (of course), positioning and z-index is not implemented correctly. When constructing more complex layouts with positioning, one might run into trouble. See this exhaustive guide to positioning.
And one should not forget the trouble with positioned elements and the select element staying always on top… Ugh.
16/12/2005
Excellent!
Whats all this “h2+p” malarkey??
16/12/2005
Great article, Andy. I’ve been making use of these techniques to style complex little pieces of a primarily float-based design for my current client, and it’s been a delight to rediscover the power and flexibility the combination of floats, positioning and stacking can bring.
16/12/2005
@ Reuben Whitehouse:
h2+p is an ‘adjacent sibling selector’
16/12/2005
The main thing that always gets in my way is how changing the position or float attribute of an element messes with the z-index, usually in undesirable ways.
16/12/2005
I’m somewhat happy to see this topic brought up. I was recently working on a redesign of my portfolio which required the use of transparent PNG (just used a behaviour file for IE to fix it) and the z-index property. eventually the design was ditched, but I agree with you that we’ll probably see a lot of sites making use of this technique throughout 2006, especially now that IE’s announced all their fixes.
by the way, what exactly do you expect the penetration rate to be for IE7. It’s only going to be for XP SP2 users, so I can’t really see a ton of users mkaing the switch so fast, if anything I can only see more users switching to other browsers.
16/12/2005
Zeerus: seeing as every other browser supports alpha PNGs fine any movement is a good thing :)
16/12/2005
Robin, have to agree with you there, I wonder when Microsoft will finally lose it’s grip on the world?
16/12/2005
Nice illustrations ang great article! But it isnt always necessary to use explicit positioning and z-index to stack elements on top of each other.
1) Every nested element is one level higher then its parent. This is why “sliding door” technique can work.
2) Every floatad element is higher then not floated (and not positioned) elements. “Faux columns” is based on this fact.
3) In some cases we can use negativ margins “to pull back” the next element.
16/12/2005
Well done!
16/12/2005
Great job, Andy! Finally an easy to understand explanation of z-index along with some good examples of “real world” usage. Thanks!
16/12/2005
been useing it for a while..
http://aprilcolo.com/ Most all site is png background and logo are pure png transparent.. It is awesome to see how colors stack on each other ..
Go ahead and dont be scared….
16/12/2005
It’s funny, because if you look at comment #4 on Andy Budd’s site, you’ll see my prediction:
“Alpha pngs are going to be hot. With lots of element layering. I’ve done it and I’ve seen the power! Expect to see some crazy designs in the next year.”
It’s nice to see a cool example of it though. :)
16/12/2005
When may we expect Malarkey’s printed tome of styles?
16/12/2005
Nice article!
Long live the big Z ;)
16/12/2005
Awesome, I actually started using z-index on a couple projects recently. It really doesn’t make sense to merge a bunch of separate “objects” in Photoshop just to keep stacking order and visual effects. Too bad about that transparency… it can be tough matching colors with 8-bit and matteing.
I’m glad to see others using the concepts. And while I probably won’t be using the Karova site anytime soon I’m glad it was built so “progressively.” Hooray IE7!! (though I hate IE in general) ;)
16/12/2005
@ Everyone: Awww, thanks you guys!
@ Jacob Harvey: “And while I probably won’t be using the Karova site anytime soon [...]” ? Stop talking that way, think positive! ;)
@ Sean Fraser: “When may we expect Malarkey’s printed tome of styles?” I can officially announce that [...] ;)
@ Jonathan Snook: As always one step ahead of me Jonathon! ;)
@ Jano: Good points and worth remembering.
@ Klaus Hartl: Now that link is a keeper! Thank-you.
16/12/2005
Sweet. Glad I sneaked something very similar into my case study for Andy Budd’s book. I’m now Malarkey-2006-Prediction compliant!
(And I guess I’m dated now, too, since you beat me to it, Andy. Sigh…)
16/12/2005
this is just what the doctor ordered. i happened here totally by accident but have been looking for a straightforward explanation of how to use z-index idea. thanks!
19/12/2005
I have never used z-index but this will definetly change my choice while building websites.
20/12/2005
that > in de css part doesn’t always work. Microsofts IE had problems dealing it. Therefor you’de better use
#divid otherChil
21/12/2005
Your first example seems wrong, if you want the effect you are illustrating you should change the css to something like:
div { position: absolute; height: 100px; width: 100px;/* uncomment this to be sure it looks the same in all browsers: margin: 0px; padding: 0px; overflow: visible;
*/
} #one { z-index: 3; top: 40px; left: 60px; } #two { z-index: 1; top: 20px; left: 20px; } #three { z-index: 2; top: 60px; left: 0px; }Off course you also have to add background colour and transparency(not widely supported yet).
24/12/2005
@andy Clark: can officially announce that [...]
Excellent. “CSS Malarkey.” Can’t wait.
28/12/2005
Great write-up! For those who are still concerned about IE’s support of PNG’s, Andy had previously pointed me to Dave Shea’s posts on MOSe
That way you can reward the modern visitors out there, but still give IE users something usable, just not as purty. Thanks Andy!
04/01/2006
check this out maybe you have maybe you haven’t but what is the disadvantage of running this php script over your html to hack IE with use of png 24 ’s I used it and it worked great
http://koivi.com/ie-png-transparency/
11/01/2006
It’s a pity Z is so broken in IE: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Commenting is closed for this article.