CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xander
Xander

Reputation: 1011

Z-Index not taking effect?

I'm trying to use a background image, with divs over the top of it. All the elements have position attributes and i've currently given the background image an opacity of 50% so that I can see behind it. The z-index of the div 'wrapper' is higher than the image but is still appearing behind. Also it's at the bottom of the page and I'd like it to appear at the top and have a height if 100%.

Here is an image of what i'm seeing currently:

As you can see the div is behind the image and can only be seen becuase of the image opacity.

Any help would be greaty appreciated, thank you.

Upvotes: 1

Views: 121

Answers (2)

relic
relic

Reputation: 1704

It's because your #Page container has a z-index lower than the image, even though the wrapper has a z-index higher. The parent container's Z takes precedence.

Simply removing the z from your #Page will probably fix the issue (without having a fiddle to test that on, but pretty sure).

Additionally, you don't actually need z on all this stuff. You could take advantage of the normal stacking order of elements, with the elements lower down in the markup being stacked on top of earlier elements....

Upvotes: 1

leuquim
leuquim

Reputation: 655

The z-index value of a child element only plays a role within the scope of its parent. In this case, #wrapper is inside of #Page and has a z-index of -1000 relative to #home-bg z-index of 2.

Upvotes: 0

Related Questions