css z-索引不适用于固定定位

wmvff8tz 于 2023-02-01 发布在其他

关注(0)|答案(8)|浏览(140)

我有一个默认位置为div（即position:static）的div和一个默认位置为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;
}

<div id="over">
  Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>

<div id="under"></div>

或者在jsfidle上点击这里：http://jsfiddle.net/mhFxf/
我可以通过在静态元素上使用position:absolute来解决这个问题，但是有人能告诉我 * 为什么 * 会发生这种情况吗？
（似乎有一个类似的问题，（Fixed Positioning breaking z-index），但它没有一个令人满意的答案，因此我在这里用我的示例代码问这个问题）

css

来源：https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning

8条答案

按热度按时间

vhmi4jdf1#

将position: relative添加到#over，如以下代码段所示：

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

<div id="over">
  <P>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </>
</div>

<div id="under"></div>

Fiddle

赞(0）回复(0）举报 2023-02-01

kmynzznz2#

这个问题可以用很多方法来解决，但实际上，了解堆叠规则可以让您找到适合您的最佳答案。

溶液

<html>元素是您唯一的堆叠上下文，因此只需遵循堆叠上下文中的堆叠规则，您将看到元素按此顺序堆叠
1.堆栈上下文的根元素（本例中为<html>元素）
1.具有负z索引值的定位元素（及其子元素）（较高值堆叠在较低值之前;具有相同值的元素根据HTML中的外观进行堆叠）
1.未定位元素（按HTML中的外观排序）

z索引值为auto的定位元素（及其子元素）（按HTML中的外观排序）
1.具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面;具有相同值的元素根据HTML中的外观进行堆叠）
所以你可以
1.将z-index设置为-1，对于定位的#under-ve z-index出现在未定位的#over元素后面
1.将#over的位置设置为relative，以便规则5应用于它
真正的问题

- 在尝试更改元素的堆叠顺序之前，开发人员应了解以下内容。**
当堆叠上下文形成时
缺省情况下，<html>元素是根元素，并且是第一个堆栈上下文
堆叠上下文中的堆叠顺序

The Stacking order and stacking context rules below are from this link

堆叠上下文形成时

当元素是文档的根元素时（<html>元素）
当元素的位置值不是static且z索引值不是auto时
当元素的不透明度值小于1时
一些较新的CSS属性也可以创建堆叠上下文。这些属性包括：转换、过滤器、CSS区域、分页媒体以及其他可能的内容。https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
作为一般规则，如果CSS属性需要在屏幕外上下文中呈现，则必须创建新的堆栈上下文。

堆叠上下文中的堆叠顺序

元素的顺序：

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

赞(0）回复(0）举报 2023-02-01

uqzxnwby3#

由于over div没有定位，z-index不知道在哪里以及如何定位它（相对于什么？）。只需将上div的位置更改为相对，这样就不会对该div产生副作用，然后下div将服从您的意愿。
这是你的example on jsfiddle。

赞(0）回复(0）举报 2023-02-01

zqry0prt4#

此答案提供了错误信息。请查看@Dansingerman的注解和示例。*
z-index仅在特定上下文中起作用，即relative、fixed或absolute位置。

相对div的z-index与绝对或固定div的z-index无关。

赞(0）回复(0）举报 2023-02-01

vql8enpb5#

为#under指定一个负的z-index，例如-1
发生这种情况是因为z-index属性在position: static;中被忽略，而z-index恰好是默认值;所以在您编写的CSS代码中，无论您在#over中将其设置为多高，z-index对于两个元素都是1。
通过给#under一个负值，它将在任何z-index: 1;元素之后，即#over。

赞(0）回复(0）举报 2023-02-01

xtfmy6hx6#

我在建一个导航菜单。我在导航菜单的css中有overflow: hidden，它隐藏了所有的东西。我以为是z轴的问题，但实际上我隐藏了导航菜单之外的所有东西。

赞(0）回复(0）举报 2023-02-01

jvlzgdj97#

当元素位于正常流之外时，它们可以与其他元素重叠。
根据http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp上的重叠元素部分

赞(0）回复(0）举报 2023-02-01

00jrzges8#

CSS规范中定义的固定元素（和绝对元素）的行为：
它们的行为就像是从文档中分离出来，并放置在最近的固定/绝对位置的父文档中。（不是逐字引用）
这使得zindex的计算有点复杂，我通过在body元素中动态创建一个容器并移动所有这样的元素（在body元素中被分类为“my-fixed-ones”）来解决我的问题（同样的情况）

赞(0）回复(0）举报 2023-02-01

我来回答

css z-索引不适用于固定定位

8条答案

溶液

堆叠上下文形成时

堆叠上下文中的堆叠顺序

相关问题

热门标签

最新问答