I have a website that consists of a 960px wide #page-wrap, and inside, the usual #header, #content, #footer. However, I would like to add some visual elements to the edges of some of these divs, and these images would extend past the 960px width of the #page-wrap and enter the area of the other divs.

The easiest way I could think of to do this was to make a div inside the div that I want to decorate, and it would hold the visual elements as its background image, and then I would position it absolutely. However, I cannot seem to get the z-index to stack properly.

Site here: http://tinyurl.com/3ua79yj

On the homepage, both the wooden frame around the slider, and the leaves on the corner of the #content area are in their own divs, positioned absolutely, and with z-indexes, but the divs that come later in the HTML still have their background images above the earlier divs. Ideally, I would like the leaves (#content_bg [z-index: 0]) to appear under the wooden frame (#slider_background [z-index: 2]) on the homepage, and under the logo box (#logo [z-index: 5]) on the other pages. Right now #content_bg even appears over #content.

Any hints are greatly appreciated. I am also very open to any suggestions for better ways to code this.

1 answer

Ktash 1851
1
point
This was chosen as the best answer

So, the issue is your use of z-index, which I think may stem from a (very common) misconception about how z-indexes work in the standards. Your issue has to do with the stacking context of the elements in question. Your leaf is actually, at the global level, at z-index: 5, and within that context, at z-index: 0. The #content element resets the stacking context for all elements under it and essentially locks all elements at that level. Many people think this is a bug in IE 7 and that all elements should be under the same stacking context, but the bug is that the stacking index is reset even if there is no z-index set. So, you can move the element, you can remove the z-index on the #content element, or you can re-balance the indexes to get the desired effect (maybe with some compromise).

Answered almost 8 years ago by Ktash
  • Ah, I understand. I assumed that if you stated a z-index, it would override an inherited one. Thank you for your help! petroica almost 8 years ago