CSS help needed!

Hi everyone!

As you might know, I’ve been styling the issue tracker for the past couple of days. It’s pretty much finished now, but there’s still one serious issue I can't seem to solve no matter how much I tried, so I was wondering if anyone could help. Quite surprisingly, it’s a CSS issue.

Steps to reproduce:
- Go to any issue, for example: http://project.webplatform.org/skin/issues/3
- Scroll down
- Notice how the breadcrumbs and buttons overlap the purple box, even though according to z-index they shouldn't. Same happens with dialog boxes (e.g. when you click Resolve).

Notes:
- Adjusting the z-index value doesn't solve it, unless I set it to 0 for the breadcrumbs and buttons, but that would create other problems. Assume the breadcrumbs and buttons can't change.
- Both elements are positioned (absolute or fixed). Even if I set both to absolute and move the elements, the breadcrumbs are still on top.
- Reproduced in both Firefox and Chrome, so it's unlikely to be a browser bug.

It looks easy, but I've tried everything and can't solve it. :( Maybe it *is* easy though and my brain is just stuck, so don't be put off trying obvious solutions first.

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou