Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Fixed Positioning Breaking Z-index

Post a Comment
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 t

Solution 1:

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.

Solution 2:

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

Solution 3:

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.

Post a Comment for "Fixed Positioning Breaking Z-index"