CODEWITHSUNDEEP
css
i7nvd
i7nvd

Reputation: 1318

z-index isn't applied

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?

Upvotes: 35

Views: 27619

Answers (2)

animuson
animuson

Reputation: 54729

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.

Upvotes: 70

PCasagrande
PCasagrande

Reputation: 5402

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.`

Upvotes: 17

Related Questions