CODEWITHSUNDEEP
htmlcss
GeekGirl
GeekGirl

Reputation: 57

Fixed Positioning breaking z-index

I have a webpage that I need to modify, the background, which is currently absolute positioned with z-index to push it back, needs to stay put when scrolling, i need to change it to fixed, yet doing so seems to break z-index and push the content below it vertically. Any ideas?

edit: OK I managed to get it to work in FF, but IE is still broken...

Upvotes: 0

Views: 7676

Answers (3)

Mr_Moneybags
Mr_Moneybags

Reputation: 4027

Maybe look at the rules below for how elements are stacked. The Stacking order and stacking context rules below are from this link

Stacking Order within a Stacking Context

The order of elements:

  1. The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules below)
    • You cannot put a child element behind a root stacking context element
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

When a Stacking Context is Formed

  • When an element is the root element of a document (the <html> element)
  • When an element has a position value other than static and a z-index value other than auto
  • When an element has an opacity value less than 1
  • Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Upvotes: 6

jeroen
jeroen

Reputation: 91744

Perhaps you can put the background that is already there in a wrapper for the whole page and use the gradient background on the body instead.

Depending on the gradient, you can also try using a css3 gradient on the background of the body (or simply multiple backgrounds...) and use css3pie to make it work in IE.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

Made a quick test. In its simplest form z-index doesn't break when using position: fixed;.

Upvotes: 2

Related Questions