z-index isn't applied

Question

First off, please let me say I'm pretty new to CSS. Still lots to learn! I'm working on a site at https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77

Everything is working great, EXCEPT that the main content box is being placed under the fixed-position logo instead of over it, even though the z-index on the logo is lower than the z-index on the content box. What can you geniuses tell me?

Jabon

The link has become invalid. Could someone recover the original content? – Strontianite

web.archive.org/web/20130709112702/http://www.thesweet-spot.com/… – Gunter

Answer 1

There's actually two reasons:

1. Its parent is set to show up behind the logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.

2. A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.

Bassist

Any way around this? To have an object behave as relative and part of the picture but when scrolled to behave as absolute while still being able to provide tags inside this container to be on-top of all other content? – Uniplanar

Answer 2

It is constrained by the parent container's z-index. You cannot set a child to a higher z-index than the parent; it caps at the parent's value.

You could make the stripes a background of the body tag and then set the container to have no background. Once that is done set container to a higher z-index.`

Wayne

Unfortunately, that workaround won't work, because the stripes are offset by a few pixels from the top, and therefore the body covers too much. But I'll find another workaround - thanks for taking the time to answer! – Jabon

I wasn't aware of the child/parent z-index. Up vote from me. – Rumble

Child and parent strategy.. never knew about this. Thanks Op. – Antipyrine