Beautimous as always Andy.

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.

Zed’s dead :-) baby :)

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

Fantastic Andy, fantastic!. Thank you so much.

shite, this is a good one!!

“everything’s gonna to be alright”?!? :)

Well, thats intresting. :) Done nicely.

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?

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.

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.

Excellent!

Whats all this “h2+p” malarkey??

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.

@ Reuben Whitehouse:

h2+p is an ‘adjacent sibling selector’

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.

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.

Zeerus: seeing as every other browser supports alpha PNGs fine any movement is a good thing :)

Robin, have to agree with you there, I wonder when Microsoft will finally lose it’s grip on the world?

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.

Well done!

Great job, Andy! Finally an easy to understand explanation of z-index along with some good examples of “real world” usage. Thanks!

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

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

When may we expect Malarkey’s printed tome of styles?

Nice article!

Long live the big Z ;)

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) ;)

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

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…)

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!

I have never used z-index but this will definetly change my choice while building websites.

that > in de css part doesn’t always work. Microsofts IE had problems dealing it. Therefor you’de better use

#divid otherChil

Your first example seems wrong, if you want the effect you are illustrating you should change the css to something like:

*/

Off course you also have to add background colour and transparency(not widely supported yet).

@andy Clark: can officially announce that [...]

Excellent. “CSS Malarkey.” Can’t wait.

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!

It’s a pity Z is so broken in IE: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html