繁体 English 中英

固定定位断裂Z索引

[英]Fixed Positioning breaking z-index

原文 2011-03-03 14:28:59 0 3 html/ css

我有一个网页需要修改，背景（当前使用z-index绝对定位以将其推回）在滚动时需要保持原状，我需要将其更改为固定，但这样做似乎会破坏z-索引并垂直将其下推。 有任何想法吗？

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

也许看看下面关于如何堆叠元素的规则。 下面的堆叠顺序和堆叠上下文规则来自此链接

堆叠上下文中的堆叠顺序

元素顺序：

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

当元素是文档的根元素时（ <html>元素）
当元素的位置值不是静态的并且 z索引值不是auto时
当元素的不透明度值小于1时
几个较新的CSS属性也创建了堆栈上下文。 其中包括：转换，过滤器，css区域，分页媒体，以及其他。 参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
通常，如果CSS属性需要在屏幕外的上下文中进行渲染，则它必须创建一个新的堆栈上下文。