z-index不适用于固定定位

时间 2020-02-09

原文原文链接

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

若是我设置元素的z索引，彷佛不可能使固定元素落后于静态元素。 html

#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/ web

我能够经过在静态元素上使用position:absolute来解决这个问题，可是有人能告诉我为何会发生这种状况吗？ ide

（彷佛有一个相似的问题，这个问题，（固定位置打破了z-index ）但它没有一个使人满意的答案，所以我在这里用个人示例代码问这个问题） spa

#1楼

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

发生这种状况是由于在position: static;忽略了z-index属性position: static; ，刚好是默认值; 因此在你编写的CSS代码中，不管你在#over设置#over ， z-index对于两个元素都是1 。 pwa

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

#2楼

当元素位于正常流动以外时，它们能够与其余元素重叠。 htm

根据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中的外观堆叠）