我有一个带有默认定位的 div（即 position:static）和一个带有 fixed 位置的 div。
如果我设置元素的 z-indexes，似乎不可能让固定元素落后于静态元素。
#over { 宽度：600px; z 指数：10； } #under { 位置：固定；顶部：5px；宽度：420px；左：20px；边框：1px 实心；高度：10%；背景：#fff; z-index：1； }
或在此处的 jsfiddle 上：http://jsfiddle.net/mhFxf/
我可以通过在静态元素上使用 position:absolute 来解决这个问题，但是谁能告诉我为什么会发生这种情况？
（这似乎有一个类似的问题，（Fixed Positioning breaking z-index）但它没有一个令人满意的答案，因此我在这里用我的示例代码问这个问题）
将 position: relative 添加到 #over，如以下代码段所示：
#over { 宽度：600px; z 指数：10；位置：相对； } #under { 位置：固定；顶部：14px；宽度：415px；左：53px；边框：1px 实心；高度：10%；背景：#f0f； z-index：1； }
Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。
这个问题可以通过多种方式解决，但实际上，了解堆叠规则可以让您找到最适合您的答案。
解决方案
<html> 元素是您唯一的堆叠上下文，因此只需遵循堆叠上下文中的堆叠规则，您就会看到元素按此顺序堆叠
堆叠上下文的根元素（本例中为 元素） 具有负 z-index 值的定位元素（及其子元素）（较高值堆叠在较低值之前；具有相同值的元素根据外观堆叠HTML) 非定位元素（按 HTML 中的外观排序） z-index 值为 auto 的定位元素（及其子元素）（按 HTML 中的外观排序） 具有正 z-index 的定位元素（及其子元素）值（较高的值堆叠在较低的值之前；具有相同值的元素根据 HTML 中的外观堆叠）
这样你就可以
将 z-index 设置为 -1，因为 #under 定位 -ve z-index 出现在非定位 #over 元素的后面 将 #over 的位置设置为相对位置，以便规则 5 适用于它
真正的问题
在尝试更改元素的堆叠顺序之前，开发人员应了解以下内容。
堆叠上下文形成时 默认情况下， 元素是根元素，并且是第一个堆叠上下文 堆叠上下文中的堆叠顺序
The Stacking order and stacking context rules below are from this link
形成堆叠上下文时
当元素是文档的根元素时（ 元素）
当一个元素的位置值不是 static 并且 z-index 值不是 auto 时
当元素的不透明度值小于 1 时
一些较新的 CSS 属性也创建了堆叠上下文。其中包括：转换、过滤器、css 区域、分页媒体，可能还有其他。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
作为一般规则，如果 CSS 属性需要在屏幕外上下文中呈现，则它必须创建一个新的堆叠上下文。
堆叠上下文中的堆叠顺序
元素顺序：
堆叠上下文的根元素（默认情况下 元素是唯一的堆叠上下文，但是任何元素都可以是堆叠上下文的根元素，请参见上面的规则） 您不能将子元素放在根堆叠上下文元素的后面 定位元素（及其子）具有负 z-index 值（较高值堆叠在较低值之前；具有相同值的元素根据 HTML 中的外观堆叠） 非定位元素（按 HTML 中的外观排序） 定位元素（及其子），z-index 值为 auto（按 HTML 中的外观排序） 具有正 z-index 值的定位元素（及其子级）（较高的值堆叠在较低值的前面；具有相同值的元素根据 HTML 中的外观堆叠）
You cannot put a child element behind a root stacking context element。我会将其扩展为 any 新的堆叠上下文元素。不幸的是，这结束了我的粘性元素，它有一个在滚动时激活的阴影层，因为由于 position: sticky 创建的堆叠上下文，我无法将 z-index 设置为显示在粘性元素后面。
由于您的 over div 没有定位，z-index 不知道在哪里以及如何定位它（以及相对于什么？）。只需将您的上 div 的位置更改为相对，因此该 div 没有副作用，然后下 div 将服从您的意愿。
这是您在 jsfiddle 上的示例：Fiddle
编辑：我看到有人已经提到了这个答案！
z-index 仅适用于特定上下文，即 relative、fixed 或 absolute 位置。
相对 div 的 z-index 与绝对或固定 div 的 z-index 无关。
编辑这是一个不完整的答案。这个答案提供了虚假信息。请查看@Dansingerman 的评论和下面的示例。
给 #under 一个否定的 z-index，例如 -1
发生这种情况是因为 position: static; 中忽略了 z-index 属性，而这恰好是默认值；因此，在您编写的 CSS 代码中，无论您在 #over 中设置多高，两个元素的 z-index 都是 1。
通过给 #under 一个负值，它将在任何 z-index: 1; 元素之后，即 #over。
position: sticky 元素的有效解决方案
我正在建立一个导航菜单。我的导航 CSS 中有 overflow: hidden，它隐藏了所有内容。我认为这是一个 z-index 问题，但实际上我将所有内容都隐藏在导航之外。
当元素位于正常流程之外时，它们可以与其他元素重叠。
根据 http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp 上的重叠元素部分
CSS 规范中定义的固定元素（和绝对元素）的行为：
它们的行为就像它们与文档分离一样，并放置在最近的固定/绝对定位的父级中。 （不是一个字一个字的引用）
这使得 zindex 计算有点复杂，我通过在 body 元素中动态创建一个容器并移动所有此类元素（在该 body 级元素中被分类为“my-fixed-ones”）解决了我的问题（相同的情况） )
我实际上并没有将 z-index 应用于我的固定元素，这就是它不起作用的原因。
大错特错。
</body>和一个额外的标签</html>。position: relative实际上解决了我的问题。