Z-Index Issues

[jamielproductions]

Hi!
I was working on the navigation bar for my site redesign and noticed a problem. It’s kind of obvious in the image (http://bit.ly/zCj2uU); I want the tilted nav links to be behind the content of the site. The only problem is that I want room for expansion, and since the section tag (with the main content) and the aside tag (with the sidebar, to the right of the green line in the picture) don’t have a container excluding the header, is it possible to fiddle with the z-indexes of things to make the white background over the nav links?

The white background is the background of the body tag, the section and header tags have transparent backgrounds. I don’t really want to have to set backgrounds on the section and aside since the white will be replaced with an image. Is it possible to get the nav links in front of the header but behind the body background using z-index?

I also might want to play with the inset shadow of the header. Is there a way to control the z-index of that separate from the nav links?

TL;DR:
Check this image out: http://bit.ly/zCj2uU
My questions are as follows:
1) Is it possible to get the nav links behind the white background if the white background is the body tag?
2) Is it possible to change the z-index of the shadow of an element independently from the element itself?

Any help would be highly appreciated.
Thanks!
-Jamie

[joshuanhibbert]

With your current layout, anything that sits behind the body will no longer be visible. Think about how layers work: if an element is hidden behind the body, which is behind the header, would it make sense for part of that element to then be visible above the header?

I would recommend taking a different approach, as what you want to accomplish certainly seems achievable. Also, shadows are tied directly to their respective elements, so unfortunately no z-index trickery there either.

If you want to put what you have into a jsFiddle, I will take a look at it for you. Whilst the images are great in that they show us the issue, and what you are after, they don’t allow us to see/edit the markup at all.

[wolfcry911]

1) no, it’s not possible. But why not add the white to the section and aside in conjunction with the image?
2) as joshua already stated, no.

One other thing to try is to add overflow: hidden to the header

[jamielproductions]

Wolfcry, you are my favorite person right now. Overflow: hidden worked like a dream.

[joshuanhibbert]

@wolfcry911 Nicely done Sir; I couldn’t see the forest for the trees. I almost kicked myself when I read your answer :p

[Author]

Posts