CSS z-index and float lossage

Dear Lazyweb,

Can someone please tell me what CSS magic I need to do to make the links over on the right side of this page be clickable? (The "2006 Best of the Bay" stuff.) I thought that setting z-order:1 on .event_awards should do it but that seems to be ignored, and all of .event_blurb (the leftmost column) overlaps it as far as clicks are concerned.

Tags: , , ,

7 Responses:

  1. Paul Roub says:

    Setting z-index:100 and position: relative on .event_awards works for me.

    z-index doesn't apply to static-positioned elements.

    • Paul Roub says:

      (or z-index: 1, sorry, the 100 isn't necessary)

    • jwz says:

      Why doesn't .event_blurb { z-index: -1; } work, since that's the thing that seems to want to grab everyone else's clicks?

      • Paul Roub says:

        It lives in the stacking context of its parent (.event_desc), which is the thing whose z-index is judged relative to its peer .event_awards. Setting z-index: -1 on .event_desc does seem to do the trick, but breaks links in that section, since they're now overlapped by something else.

    • Eric TF Bat says:

      Agreed. I used the Web Developer Toolkit in Firefox to edit the CSS to add only this:

      .event_awards { position: relative; z-index: 1; }

      Experimentation showed that the real problem is to do with the float:right on that element. I've seen it before, and only careful juggling of floats and position:relative or position:absolute could fix it.

      z-index is a code smell, but CSS makes it unavoidable once you're down a particular path.

  2. Mark Beeson says:

    The problem stems from .event_desc being positioned relative. Take that out and your link problem is fixed. Then go to .event_lineup and remove the left:0 and the layout is fixed.

  3. Ian Oxley says:

    Moving .event_awards so that it sits inside of .event_desc description works for me:

    <div class="event_desc description">
    ` <div class="event_awards">...</div>
    ` <div class="event_lineup">...</div>
    ` ...