z-index不能用于固定位置
我有一个默认的定位（即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 ），但没有一个满意的答案，所以我在这里用我的示例代码来问这个）
这个问题可以通过多种方式解决，但是真正了解堆栈规则可以让您find适合您的最佳答案。
解决scheme
<html>元素是您唯一的堆栈上下文，因此只需按照堆栈上下文中的堆栈规则操作即可看到元素按此顺序堆叠
- 堆叠上下文的根元素（在这种情况下是
<html>元素）- 被定位的元素（及其子元素）具有负Z指数值（较高的值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）
- 非定位元素（通过HTML中的外观sorting）
- 定位元素（及其子元素）的z-index值为auto（按HTML中的顺序排列）
- 具有正z-索引值的定位元素（及其子元素）（较高值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）
所以你可以
- 设置为-1的z索引，因为
#under位置-ve z-index出现在非定位的#over元素的后面 - 将
#over的位置设置为relative以使规则5适用于它
真正的问题
在尝试更改元素的堆叠顺序之前，开发人员应该知道以下内容。
- 堆叠上下文形成时
- 默认情况下，
<html>元素是根元素，是第一个堆栈上下文
- 默认情况下，
- 在堆叠上下文中堆叠顺序
下面的堆叠顺序和堆叠上下文规则来自这个链接
堆叠上下文形成时
- 当元素是文档的根元素（
<html>元素） - 当一个元素有一个非静态的位置值和一个除auto之外的z-index值
- 当元素的不透明度值小于1时
- 几个较新的CSS属性也创build堆叠上下文。 这些包括：变换，filter，CSS区域，分页媒体，可能还有其他的。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- 一般来说，如果一个CSS属性需要在离屏上下文中渲染，那么它必须创build一个新的堆栈上下文。
在堆叠上下文中堆叠顺序
元素的顺序：
- 堆叠上下文的根元素（默认情况下，
<html>元素是唯一的堆栈上下文，但任何元素都可以是堆栈上下文的根元素，请参阅上面的规则）- 您不能将一个子元素放在根堆栈上下文元素的后面
- 被定位的元素（及其子元素）具有负Z指数值（较高的值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）
- 非定位元素（通过HTML中的外观sorting）
- 定位元素（及其子元素）的z-index值为auto（按HTML中的顺序排列）
- 具有正z-索引值的定位元素（及其子元素）（较高值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）
添加position: relative; 到#over
#over { width: 600px; z-index: 10; position: relative; } #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>
z-index只在特定的上下文中起作用，即relative ， fixed或absolute位置。
相对div的z-index与绝对或固定div的z-index无关。
编辑 这是一个不完整的答案。 这个答案提供了虚假信息。 请回顾@ Dansingerman的评论和下面的例子。
因为你over div没有定位，z-index不知道在哪里以及如何定位（以及关于什么？）。 只要把你的div的位置改成相对的，那么div就没有副作用，那么div就会服从你的意志。
这里是你的jsfiddle的例子： 小提琴
编辑 ：我看到有人已经提到这个答案！
给#under负z-index ，例如-1
发生这种情况是因为z-index属性在position: static;被忽略position: static; ，这恰好是默认值; 所以在你写的CSS代码中，无论你在#over设置了#over ， z-index都是1 。
通过赋予一个负值，它将落后于任何z-index: 1; 元素，即#over 。
当元素位于正常stream程之外时，它们可以重叠其他元素。
根据http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp上的重叠元素部分;
我正在build立一个导航菜单。 我有overflow: hidden在我的导航的CSS隐藏的一切。 我认为这是一个Z指数的问题，但我真的隐藏了我的导航之外的一切。
只需查看MDN文档 。 这是我见过的最好的解释。
在CSS Spec中定义的固定元素（和绝对元素）的行为：
他们的行为，因为他们从文件分离，并放置在最近的固定/绝对定位的父母。 （不是一句一句的引用）
这使得zindex计算有点复杂，我通过在body元素中dynamic创build一个容器并移动所有这样的元素（在body-level元素中被分类为“my-fixed-ones”）来解决我的问题（同样的情况） ）
