我有一个具有默认定位的div （即position:static ）和一个具有fixed位置的div 。

如果我设置元素的z索引，似乎不可能使固定元素落后于静态元素。

 #over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; }

 <!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div id="under"> </div> </body> </html>

或者在这里的jsfiddle： http ： //jsfiddle.net/mhFxf/

我可以通过在静态元素上使用position:absolute来解决这个问题，但是有人能告诉我为什么会发生这种情况吗？

（似乎有一个类似的问题，这个问题，（固定位置打破了z-index ）但它没有一个令人满意的答案，因此我在这里用我的示例代码问这个问题）

#1楼

给#under一个负z-index ，例如-1

发生这种情况是因为在position: static;忽略了z-index属性position: static; ，恰好是默认值; 所以在你编写的CSS代码中，无论你在#over设置#over ， z-index对于两个元素都是1 。

通过给#under一个负值，它将落后于任何z-index: 1; 元素，即#over 。

#2楼

当元素位于正常流动之外时，它们可以与其他元素重叠。

根据http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp上的重叠元素部分

#3楼

CSS规范中定义的固定元素（和绝对元素）的行为：

它们在从文档中分离时表现，并放置在最近的固定/绝对定位父级中。（不是逐字逐句）

这使得zindex计算有点复杂，我通过在body元素中动态创建一个容器并移动所有这些元素（在body-level元素中被分类为“my-fixed-ones”）解决了我的问题（相同的情况））

#4楼

我正在建立一个导航菜单。我有overflow: hidden在导航器的css中，隐藏了一切。我认为这是一个z-index问题，但实际上我隐藏了导航之外的所有内容。

#5楼

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

解决方案

<html>元素是您唯一的堆叠上下文，因此只需遵循堆叠上下文中的堆叠规则，您将看到元素按此顺序堆叠

堆叠上下文的根元素（本例中为<html>元素）

具有负z-index值的定位元素（及其子元素）（较高值堆叠在较低值的前面;具有相同值的元素根据HTML中的外观堆叠）

非定位元素（按HTML中的外观排序）

z-index值为auto的定位元素（及其子元素）（按HTML中的外观排序）

具有正z-index值的定位元素（及其子元素）（较高值堆叠在较低值的前面;具有相同值的元素根据HTML中的外观堆叠）

所以你可以

将z-index设置为-1，对于#under -ve z-index出现在非定位的#over元素后面
的位置设置#over以relative使第5条适用于它

真正的问题

在尝试更改元素的堆叠顺序之前，开发人员应该了解以下内容。

当形成堆叠上下文时
- 默认情况下， <html>元素是根元素，是第一个堆叠上下文
堆叠上下文中的堆叠顺序

下面的堆叠顺序和堆叠上下文规则来自此链接

当形成堆叠上下文时

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

在堆叠上下文中堆叠顺序

元素的顺序：

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

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3163827

标签

z-index