Css z-索引不适用于固定定位

Css z-索引不适用于固定定位,css,z-index,Css,Z Index,我有一个带默认位置的div(即位置:静态)和一个带固定位置的div 如果我设置元素的z索引,那么似乎不可能使固定元素位于静态元素之后 #完毕{ 宽度:600px; z指数:10; } #在{ 位置:固定; 顶部:5px; 宽度:420px; 左:20px; 边框:1px实心; 身高:10%; 背景:#fff; z指数:1; } 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 z-index仅在特定上下文中有效,即相对、固定或绝对位置 相对div的z-index与绝对

我有一个带默认位置的
div
(即
位置:静态
)和一个带
固定
位置的
div

如果我设置元素的z索引,那么似乎不可能使固定元素位于静态元素之后

#完毕{
宽度:600px;
z指数:10;
}
#在{
位置:固定;
顶部:5px;
宽度:420px;
左:20px;
边框:1px实心;
身高:10%;
背景:#fff;
z指数:1;
}

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

z-index仅在特定上下文中有效,即
相对
固定
绝对
位置

相对div的z-index与绝对div或固定div的z-index无关


编辑这是一个不完整的答案。这个答案提供了错误的信息。请查看@Dansingerman的评论和下面的示例。

添加
位置:相对至#结束

#完毕{
宽度:600px;
z指数:10;
位置:相对位置;
}
#在{
位置:固定;
顶部:5px;
宽度:420px;
左:20px;
边框:1px实心;
身高:10%;
背景:#fff;
z指数:1;
}

你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

由于您的
over
div没有定位,因此z索引不知道在何处以及如何定位(以及相对于什么?)。只要把你的上师的位置改成相对位置,这样对下师就没有副作用了,下师就会服从你的意愿

以下是您在JSFIDLE上的示例:

编辑:我看到有人已经提到了这个答案

下的
#一个负的
z索引
,例如
-1

这是因为在
位置:static中忽略了
z-index
属性,恰好是默认值;因此,在您编写的CSS代码中,
z-index
对于这两个元素都是
1
,无论您在
#over
中设置的值有多高

通过给
下的
#一个负值,它将位于任何
z-索引后面:1元素,即
#超过

当图元位于正常流之外时,它们可以与其他图元重叠


根据

上的重叠元素部分,CSS规范中定义的固定元素(和绝对元素)的行为:

它们与文档分离,并放置在最近的固定/绝对位置父对象中。(不是逐字引用)


这使得zindex的计算有点复杂,我通过在body元素中动态创建一个容器并移动所有这些元素(这些元素在body级别元素中被分类为“我的固定元素”)解决了我的问题(相同的情况)

我正在构建一个导航菜单。我有
overflow:hidden
在我的导航css中,它隐藏了一切。我原以为这是一个z索引问题,但实际上我把所有东西都隐藏在导航之外。

这个问题可以通过多种方式解决,但实际上,了解堆叠规则可以让你找到适合自己的最佳答案

解决
元素是您唯一的堆叠上下文,因此只需遵循堆叠上下文中的堆叠规则,您就会看到元素按此顺序堆叠

  • 堆叠上下文的根元素(本例中为
    元素)
  • 具有负z索引值的定位元素(及其子元素)(较高的值堆叠在较低的值之前;具有相同值的元素根据HTML中的外观堆叠)
  • 非定位元素(按HTML中的外观排序)
  • 使用z-index值auto(按HTML中的外观排序)定位元素(及其子元素)
  • 具有正z索引值的定位元素(及其子元素)(较高的值堆叠在较低的值之前;具有相同值的元素根据HTML中的外观堆叠)
  • 所以你可以

  • 将z-索引设置为-1,用于定位下的
    #-ve z-索引显示在未定位的
    #元素的后面
  • #over
    的位置设置为
    relative
    ,以便规则5适用于它
  • 真正的问题 在尝试更改元素的堆叠顺序之前,开发人员应了解以下内容。

  • 当堆叠上下文形成时
    • 默认情况下,
      元素是根元素,是第一个堆栈上下文
  • 堆叠上下文中的堆叠顺序

  • 当堆叠上下文形成时
    • 当一个元素是文档的根元素时(
      元素)
    • 当元素具有非静态的位置值和非自动的z索引值时
    • 当元素的不透明度值小于1时
    • 几个较新的CSS属性也可以创建堆叠上下文。这些包括:转换、过滤器、css区域、分页媒体,可能还有其他
    • 一般来说,如果CSS属性需要在屏幕外的上下文中进行渲染,那么它必须创建一个新的堆叠上下文
    堆叠上下文中的堆叠顺序 元素的顺序:

  • 堆叠上下文的根元素(默认情况下,
    元素是唯一的堆叠上下文,但任何元素都可以是堆叠上下文的根元素,请参见上面的规则)
    • 您不能使用p