Z索引不适用于固定定位
我有一个div默认位置（即position:static）和div一个fixed位置。
如果设置元素的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>
我可以通过position:absolute 在static元素上使用来解决此问题 ，但是有人可以告诉我 为什么会 这样吗？
（似乎有一个与此问题类似的问题，固定位置破坏了z-index，但是它没有令人满意的答案，因此我在这里用示例代码来询问）
问题答案：
这个问题可以通过多种方式解决，但实际上，了解堆叠规则可以使您找到最适合自己的答案。
解决方案
该<html>元素是您唯一的堆叠上下文，因此只需遵循堆叠上下文中的堆叠规则，您将看到元素按此顺序堆叠
- 堆栈上下文的根元素（
<html>在本例中为元素） - z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
- 未定位的元素（按HTML中的外观排序）
- 定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
- 具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
所以你可以
- 将z-index设置为-1，以使
#under-ve z-index出现在未定位#over元素的后面 - 设置的位置
#over，以relative使第5条适用于它
真正的问题
在尝试更改元素的堆叠顺序之前，开发人员应该了解以下内容。
- 形成堆叠上下文时
- 默认情况下，该
<html>元素是根元素，并且是第一个堆叠上下文
- 默认情况下，该
- 堆叠上下文中的堆叠顺序
形成堆叠上下文时
- 当元素是文档的根元素时（该
<html>元素） - 当元素的位置值不是静态的并且z索引值不是auto时
- 当元素的不透明度值小于1时
- 几个较新的CSS属性也创建了堆栈上下文。其中包括：转换，过滤器，css区域，分页媒体，以及其他。
- 通常，如果CSS属性需要在屏幕外的上下文中进行渲染，则它必须创建一个新的堆栈上下文。
堆叠上下文中的堆叠顺序
元素顺序：
- 堆栈上下文的根元素（
<html>默认情况下，该元素是唯一的堆栈上下文，但是任何元素都可以是堆栈上下文的根元素，请参见上面的规则）- 您不能将子元素放在根堆栈上下文元素后面
- z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
- 未定位的元素（按HTML中的外观排序）
- 定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
- 具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
-
问题内容： 我打开控制台（chrome \ firefox）并运行以下行： 内容未包含在#popupFrame中，这使它变得很奇怪。 目标是创建像firefox这样的警告框 问题答案： 第二个div是（默认值），因此z-index不适用于它。 您需要定位（将位置属性设置为，而不是在这种情况下可能需要的其他位置）要分配给的任何内容。
-
问题内容： 我在哪里，在正常情况下，CSS，固定股利将正好它被指定的（定位的情况下，）。 如果我的父母有一个translate3d转换，这似乎不被尊重。我没看到什么吗？我尝试了其他webkit转换，例如样式和转换原点选项，但是没有运气。 我在JSFiddle上附加了一个示例，其中我希望黄色框位于页面的顶部，而不是容器元素的内部。 您可以在下面找到小提琴的简化版本： 我该如何使translate3d
-
我有一个带有两个子容器的flex-box容器，在屏幕较小的情况下，右边的容器应该折叠在左边的容器下面。然而，这似乎只在父容器宽度为100%时才起作用，而当它设置为固定宽度时则不起作用。它需要一个基于设计的固定宽度，我尝试将固定宽度的容器包装在具有100%宽度的父容器中，但这并不有效。 如何将容器设置为固定宽度，以便项目在较小屏幕尺寸下正确换行？ null null JSFIDDLE链接：链接
-
我使用spring boot和spring boot starter hateoas开发了一个rest服务。我在定制ObjectMapper时遇到了一个问题。代码如下： 一个pplication.java 依赖关系： 账单java： BillController.java： 我得到的输出是： 但是我需要“账单”代替“billList”。这是因为ObjectMapper没有被定制。我是否错过了任何配
-
创建由4个相等部分组成的着陆页（Divs）。当你悬停在一个部分上时，它的大小应该会增加，而其他部分的大小会减少（高度或宽度取决于它在悬停div中的位置。 两个问题......1.高度的减少不起作用（宽度的减少起作用）2.悬停时，顶部两个部分在底部两个部分后面展开。底部的两个部分在顶部的两个部分展开，这是我想要的
-
问题内容： AngularJS的两个绑定不适用于div。我希望我的div是可编辑的，但是没有发生。有人可以建议出什么问题吗？相同的绑定在文本框中也可以正常工作。这是我的代码： 问题答案： 请尝试此操作，它可能会有所帮助 https://github.com/angular/angular.js/issues/528 这是一个3岁的未解决问题，很多人希望解决。它被标记为和，而不是错误。鉴于Angul