"Z's not dead baby, Z's not dead"

36 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

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

  2. Jeff Croft

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

  3. Justin Perkins

    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?

  4. Matt Robin

    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.

  5. Nick Fitzsimons

    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.

  6. Paul D

    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.

  7. Zeerus

    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.

  8. Jano

    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.

  9. tripdragon

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

  10. Jonathan Snook

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

  11. Jacob Harvey

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

  12. Malarkey

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

  13. Cameron Moll

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

  14. Bill Berry

    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!

  15. AndreR

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

  16. Sally Carson

    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!

  17. Das Wolf

    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/

Impress us

Be friendly / use Textile