Hi, folks. At http://www.localmotive.ca/test you'll find a site that I'm having a bit of trouble with. (You will too if you use IE -- only works in more well-behaved browsers right now, like Firefox, Safari, and Chrome.) I have one #container element with a box-shadow around it, and then inside it I have an #account element, which is the green rectangle in the top-right.
The trouble is that the #account element is above its parent (which of course is where it's supposed to be). However, it's supposed to look like it's behind the #container element. Is there any possible way to put an element behind its parent? Probably not, eh?
I see what you're trying to do. You want the drop shadow on #account to be visible on the top and sides of element but the bottom shadow needs to appear behind #content.
I tried but couldn't come up with a simple CSS solution (sorry I couldn't devote too much time to it right now). However I think you should be able to correct that if you rethink your HTML structure a little bit. The rollovers in your navigation show up on top of #account, why not determine what makes those work and apply it to #account?
Wouldn't removing the drop shadow on #account make it appear behind its container (or at least flush)? Or am I not understanding your question correctly.
Hey, folks. Thanks for your responses! I think I figured it out; you can see my kludgy solution if you revisit that link. I created an extra div called #paper (just didn't want to because I don't want to succumb to div-itis), wrapped the #content, asides, and footer in the #paper div, and gave it a z-index higher than #account. The z-index of h1#logo is higher than the #paper div, so it still overlaps sometimes, but I just made a less-overlappy version in CSS (h1#logo.sm) for certain pages where that overlap was an issue. Unfortunately I can't provide a link to those pages, because they're behind an admin login :-)
I think I eventually came to terms with the fact that I ultimately couldn't get what I wanted, because of stacking context issues. I thought of putting the #account div outside of the header element, but that would be semantically incorrect, because it's part of the header, and besides, it would make for stylesheet difficulties if I were to ever make a mobile version.
If that makes any sense :-)
Anyway, thanks for taking a look at my web page, folks!