固定定位打破z指数

时间：2011-03-03 14:29:00

标签： html css

我有一个我需要修改的网页，背景，目前是绝对定位的z-index将其推回，需要在滚动时保持不变，我需要将其更改为固定，但这样做似乎似乎打破z-index并垂直推送它下面的内容。有什么想法吗？

编辑： 好吧我设法让它在FF工作，但IE仍然被打破......

3 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

或许请查看下面的规则，了解元素的堆叠方式。 The Stacking order and stacking context rules below are from this link

堆叠上下文中的堆叠顺序

元素的顺序：

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

    6. 堆叠上下文形成时

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

答案 2 :(得分：0)

也许你可以把已经存在的背景放在整个页面的包装中，然后使用身体上的渐变背景。

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

相关问题
最新问题