Re: CSS help needed!

Hi Jeremie,

Thanks for your reply!
The purple box was just an example, there are also dialogs, etc. This would introduce way too much logic and interconnectedness into it. I know I can fix it by adjusting .tool-area or its children, but that’s not a solution.

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






On Apr 7, 2013, at 21:40, Jeremie Patonnier wrote:

> Hi :)
> 
> Just an issue with z-index of things that are not in the same container (rememeber that z-index depend on the positioning context that also depend of the structure of the DOM tree)
> 
> To avoid the issue, add position:relative and z-index: -1 to the .tool-area element when the #viewissue_header_container container become fixed
> 
> Cheers
> Jeremie
> 
> 
> 2013/4/7 Lea Verou <lea@w3.org>
> 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
> 
> 
> 
> 
> 
> 
> 
> 
> 
> -- 
> Jeremie
> .............................
> Web : http://jeremie.patonnier.net
> Twitter : @JeremiePat