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?

3 answers


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?

Answered about 8 years ago by Matt Milburn

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.

Answered about 8 years ago by Cy Klassen

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!

Answered about 8 years ago by Paul d'Aoust
  • Looks great to me! o.k.w about 8 years ago