【问题标题】：Fixed Positioning breaking z-index固定定位破坏 z-index
【发布时间】：2011-07-08 02:39:21
【问题描述】：

我有一个需要修改的网页，背景，当前使用 z-index 绝对定位以将其推回，滚动时需要保持原位，我需要将其更改为固定，但这样做似乎打破 z-index 并垂直推动其下方的内容。有什么想法吗？

编辑：好的，我设法让它在 FF 中工作，但 IE 仍然坏了......

【问题讨论】：

你有一些我们可以看到的代码或链接吗？
首先，它目前是什么 z-index？为什么不将背景设置为身体的背景图像？
.MainBG_Gradiant_Top { float:left;宽度：100%；顶部：500px；左：0px； z-索引：-1；高度：90%；位置：绝对；背景图片:url('/images/portal/BodyGradiant.png');背景重复：重复-x； }
已经有一个背景图片，这个应该会越过页面底部，滚动时会一直留在那里。
我正在尝试做这样的事情：quebecregion.com

标签： html css

【解决方案1】：

堆叠上下文中的堆叠顺序

元素的顺序：

堆叠上下文的根元素（<html> 元素默认是唯一的堆叠上下文，但任何元素都可以是堆叠上下文的根元素，请参阅下面的规则）
- 您不能将子元素放在根堆叠上下文元素的后面
具有负 z-index 值的定位元素（及其子元素）（较高的值堆叠在较低的值之前；具有相同值的元素根据 HTML 中的外观堆叠）
非定位元素（按 HTML 中的外观排序）
具有自动 z-index 值的定位元素（及其子元素）（按 HTML 中的外观排序）
具有正 z-index 值的定位元素（及其子元素）（较高的值堆叠在较低的值之前；具有相同值的元素根据 HTML 中的外观堆叠）

当堆叠上下文形成时

当元素是文档的根元素时（<html> 元素）
当元素的位置值不是静态和 z-index 值不是自动时
当元素的不透明度值小于 1 时
一些较新的 CSS 属性也会创建堆叠上下文。其中包括：转换、过滤器、css 区域、分页媒体，可能还有其他。见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
作为一般规则，如果 CSS 属性需要在屏幕外上下文中呈现，则它必须创建一个新的堆叠上下文。

【讨论】：

【解决方案2】：

Made a quick test。最简单的z-index 在使用position: fixed; 时不会中断。

【讨论】：

【解决方案3】：

也许您可以将已经存在的背景放在整个页面的包装器中，并在正文上使用渐变背景。

根据渐变的不同，您也可以尝试在正文背景上使用 css3 渐变（或简单地使用多个背景...）并使用 css3pie 使其在 IE 中工作。

【讨论】：