固定定位破坏 z-index
Posted
技术标签:
【中文标题】固定定位破坏 z-index【英文标题】：Fixed Positioning breaking 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 【参考方案1】：也许看看下面的规则是如何堆叠元素的。 The Stacking order and stacking context rules below are from this link
堆叠上下文中的堆叠顺序
元素的顺序：
-
堆叠上下文的根元素（
<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 中工作。
【讨论】：
以上是关于固定定位破坏 z-index的主要内容，如果未能解决你的问题，请参考以下文章