Z-index | CSS-Tricks 中文

CSS 年鉴 → 属性 → Z → z-index

Sara Cope 于 2022 年 9 月 20 日

div {
  z-index: 1; /* integer */
}

CSS 中的 z-index 属性控制重叠元素的垂直堆叠顺序。就像哪个元素看起来离你更近。 z-index 仅影响具有除 static（默认值）以外的 position 值的元素。

元素重叠的原因有很多，例如，相对定位将其推到了其他元素之上。负 margin 将元素拉到了另一个元素之上。绝对定位的元素相互重叠。所有这些原因。

如果没有 z-index 值，元素将按它们在 DOM 中出现的顺序堆叠（在同一层次结构级别上最低的元素出现在最上面）。具有非静态定位的元素将始终出现在具有默认静态定位的元素之上。

另请注意，嵌套起着重要作用。如果元素 B 位于元素 A 之上，则元素 A 的子元素永远不会高于元素 B。

注意，旧版本的 IE 将此上下文内容搞砸了。这里有一个针对这种情况的 jQuery 修复程序。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
有效	有效	有效	有效	4+	4+	有效

Z 先生

# 2012 年 4 月 23 日

“还要注意的是，嵌套起着重要作用。如果元素 B 位于元素 A 的顶部，则元素 A 的子元素永远不会高于元素 B。”

这并不完全正确。在您的插图中，“非子元素”只有在绿色框开始堆叠上下文时才会在顶部，为此它需要除 auto 之外的任何 z-index（或除 1.0 之外的任何不透明度）。仅仅是 position: relative 并不会开始堆叠上下文。

关于堆叠上下文的要点是，z-index 只能用于重新排列元素在*其自身堆叠上下文*中的堆叠顺序。整个堆叠上下文在其堆叠上下文中具有一个堆叠位置，该位置由其 z-index 属性及其在该父堆叠上下文中的兄弟元素的 z-index 属性确定。因此，来自不同堆叠上下文的元素永远不会在最终堆叠顺序中交错（当规范说堆叠上下文是“原子”时，这就是它的意思）。

如果您考虑“画家算法”，其中对象在场景上从后到前绘制，那么堆叠上下文就像画中画。您首先将堆叠上下文中的所有内容从后到前按适当的顺序绘制，然后在绘制其父上下文时，将整个结果贴到它应该在的位置。

如果没有 z-index，事物会几乎按 DOM 顺序堆叠，但带有定位的元素位于上方，但值得一提的是，浮动元素也位于非浮动元素的前面（但在定位框的后面）。

Vishal

评论永久链接# 2013 年 10 月 31 日

感谢您的评论。真的很有帮助。

Toby

# 2012 年 10 月 18 日

这让我之前困扰了一段时间，所以我想在这里发一个笔记——别忘了 z-index 仍然尊重父级的 overflow。因此，如果您即使在 z-index 为百万的情况下也无法看到某些内容，请检查它是否没有被 overflow:hidden 剪裁。

Matt

评论永久链接# 2013 年 2 月 27 日

我与这个问题斗争了一个小时，直到我读到这条评论！谢谢！
Aashish

评论永久链接# 2013 年 3 月 10 日

是的，我也在为父级溢出被隐藏的问题而苦恼，你的评论救了我！谢谢！
A. Cabreira

评论永久链接# 2013 年 7 月 30 日

太棒了，帮我解决了一天的头痛，谢谢！
aj

评论永久链接# 2013 年 8 月 15 日

谢谢谢谢谢谢！！
Victor

评论永久链接# 2015 年 5 月 9 日

@Toby 感谢你的提示。它有效！
yes

评论永久链接# 2015 年 12 月 23 日

它帮了我很多。谢谢！
Pete

评论永久链接# 2016 年 4 月 30 日

Toby，这拯救了我的下午。

谢谢！
hnguyen

评论永久链接# 2016 年 11 月 15 日

谢谢 Toby，你节省了我的时间
Martin

评论永久链接# 2017 年 3 月 8 日

绝对的救星——非常感谢！
Rajesh

评论永久链接# 2017 年 12 月 19 日

你是颗星！！！！
overwine

评论永久链接# 2018 年 6 月 20 日

几年后，这仍然是事实。在您疯狂尝试弄清楚 z-index 之前，请检查您的 overflow。
Manish

评论永久链接# 2018 年 9 月 14 日

你刚刚帮我省了很多麻烦！非常感谢。
Alex

评论永久链接# 2022 年 3 月 29 日

十年后，Toby 的评论仍然拯救生命（这次是我的）。

Helen

# 2013 年 1 月 24 日

谢谢，我今天又和 z-index 搏斗了。我觉得我第一次可能要赢了！

ankush

评论永久链接# 2016 年 3 月 31 日

嗨，我是来自印度的 ankush，我是一名网页设计师。我想与你合作，我们可以谈谈吗？我的 skype 是 ankushkumawat

Stupothead

# 2013 年 2 月 8 日

嗨，我遇到一个问题，负 Z-Index 在 iOS ipad 4 上不起作用。这真是个灾难，因为它曾经将全屏 BG 发送到我的模板的后面，这很有用，因为我不必为所有其他元素分配 Z-Index。有人知道合适的解决方案吗？也许 iOS 有自己的一些特殊命令，这是现在的趋势？干杯。

Abhinav

# 2013 年 6 月 27 日

@Toby：谢谢老兄 :) 小事情 :)

Tahmid

# 2013 年 7 月 8 日

Z-index 对我来说是新的。我还是不太清楚。你能通过一些例子帮我一下吗？它在 iOS 中也起作用吗？

arush

评论永久链接# 2015 年 6 月 30 日

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

这是一个标题

因为图像的 z-index 为 -1，它将被放置在文本的后面。

akshay

# 2013 年 8 月 6 日

Z-index 是元素最重要的 css 属性之一，用于将一个组件叠加在另一个组件之上。谢谢。信息不错

Rex

# 2013 年 8 月 14 日

感谢您的救命教诲！你救了我免于溺水！

braders

# 2013 年 9 月 30 日

我花了一个小时试图弄清楚这一点，信息就在这里。太棒了

Salman

# 2013 年 10 月 30 日

谢谢。你的评论让我免于谷歌搜索。

Vaibhav

# 2014 年 3 月 12 日

感谢信息！！真的很有帮助！！

# 2014 年 5 月 16 日

#border {
    width:250px;
    height:350px;
    background:url('border.png') no-repeat;
    margin:auto;
    position:relative;
}
.picture {
    position:relative;
    z-index:100;
 }

不起作用

md

评论永久链接# 2014 年 8 月 26 日

它对我有用！！
manoj

评论永久链接# 2017 年 5 月 27 日

此代码不起作用，因为您的所有元素位置都是相对的。您应该尝试将父级位置设置为相对，并将子级位置设置为绝对。此代码绝对有效。

这是一段文字

p 是父元素，img 是子元素。

ktian

# 2014 年 7 月 8 日

酷炫的响应式网站 :D
继续努力

互联网营销

# 2014 年 11 月 4 日

所以这些知识很好，但如果你展示了如何让“子元素”位于“非子元素”之上，同时仍然是绿色元素的子元素，那么这篇文章就真的很有用了。

Nazmul Hasan

# 2014 年 11 月 6 日

好文章老板……

Atul

# 2014 年 12 月 23 日

大家好

请告诉我是否应该使用 z-index:1000 及以上？

Atul Bhalerao

Chris Coyier

评论永久链接# 2015 年 1 月 22 日

我在此写了一点内容：https://css-tricks.cn/rational-z-index-values/

Joseph OLeary

# 2015 年 1 月 28 日

我使用过这种技术，结果被 bootstrap 应用的 overflow: hidden; 给卡住了。

srikanth

# 2015 年 2 月 24 日

很棒的视觉示例，我尝试过它，它有效“z-index:2;”

Shah

# 2015 年 4 月 17 日

非常感谢。在苦苦挣扎了 12 个小时后，我终于在您的帮助下解决了它。

非常感谢……

dago

# 2015 年 4 月 28 日

嗨 Cris！这里还有件有趣的事情，不透明度如何改变定位。 http://codepen.io/dagolinuxoid/pen/GJgBaK

daGo

评论永久链接# 2015 年 6 月 30 日

我写 Chris 时没有“h”——简直不敢相信)) ……抱歉。
rmastro

评论永久链接# 2022 年 7 月 15 日

谢谢！这对我有效！我从容器中删除了不透明度，h1 文本出现了——太棒了。

Alka Jain

# 2015 年 5 月 5 日

我的网站 - http://www.couponcandy.in/ 的菜单有一个类别，当我鼠标悬停在上面时，它会跑到我的 AdSense 广告下面。任何帮助都会很棒

Shemaya

# 2015 年 9 月 13 日

谢谢！真的很棒！

kenneth

# 2015 年 12 月 14 日

谢谢！终于解决我的问题了... :D

vijendhar

# 2016 年 7 月 12 日

我想使用 z-index 将地址放在我网站上的 Google 地图上，有人可以帮我吗？

Devendra Gawande

# 2016 年 10 月 1 日

它帮助我大大提高了我的技能 OyoRooms 优惠券代码

Usma Islam

# 2016 年 11 月 5 日

非常棒！非常感谢您 :)

fazal

# 2016 年 11 月 18 日

大数据是建立在（有价值的东西）硬件之上的大规模在线运行应用程序的组合。它有助于以更快、更高效（以一定成本产生大量产出）的方式存储和处理海量数据。当组织选择进行小幅调整和改进自身以实现更先进的技术时，大数据 QA 测试工程师的角色会扩展到不同的领域。在大数据 QA 测试工程师中，（检查真实性/证明真实性）使用（有价值的东西）组和其他支持部件/组件成功处理（万亿字节）数据。由于处理速度非常快，它需要很高的测试技能。它包括检查不同的（特征/特性/特质）如与他人相似、（接近真实值或真实数字的程度）、（复制某事物/多个个人或公司做同一件事）、（始终运作或表现相同的方式）、（某物确实是它声称的）、数据完整性等等。大数据 QA 测试培训课程旨在测试和修复来自 Hadoop 项目性能的错误。

Les Vaillantes

# 2018 年 11 月 16 日

如何让我的 MailChimp 弹出窗口覆盖页面内容？

我试图让 MailChimp 新闻稿弹出窗口覆盖徽标和导航栏，但它总是出现在两者后面，使其失效。
有人可以帮我编写代码，以便新闻稿弹出窗口覆盖页面内容吗？

我已经尝试了以下 CSS
.mc-modal-bg { z-index: 99995 !important; }
.mc-modal { z-index: 99999 !important; }

但它不起作用。

另外，所有文章的特色图片都重叠（在桌面和移动设备上），
首页现在乱成一团，因为我们只能看到几张图片（因为其他图片被隐藏在后面），

非常感谢您的帮助！
Les vaillantes
http://www.lesvaillantes.com

Geoff Graham

永久链接到评论# 2018 年 11 月 16 日

嘿 Les！你可能需要添加 position: relative; 或类似的东西。z-index 要求在规则集中明确声明元素的位置。

lesvaillantes

# 2018 年 11 月 16 日

你好 Geoff！
感谢您及时的反馈！我该怎么做呢？
我对 CSS 的了解很少……

谢谢！

Geoff Graham

永久链接到评论# 2018 年 11 月 16 日

类似这样

.mc-modal-bg { position: relative; z-index: 99995 !important; }

需要注意的是，如果你使用他们提供的脚本嵌入了模态窗口，MailChimp 的 CSS 可能不会被直接覆盖。

Marcos Laredo

# 2019 年 3 月 6 日

我的问题是… 我该怎么说… 很奇怪… 这个网站显示了一个由输入、数据列表和选择组件组成的自动完成组件…

在 Chrome 开发者工具中，我用一个高度很低且所有方向上都隐藏溢出的 div 将它包裹起来，然后点击输入字段，然后就出现了！它覆盖了所有内容…
将浏览器窗口设置为非常低的高度，然后再次点击输入… 令我惊讶的是，它覆盖了浏览器地址栏和收藏夹……这是怎么回事？用 CSS 可以做到吗？是因为网页浏览器以某种特殊方式将纯 HTML 元素设置在窗口中吗？
图片：包裹的 div、在开发者工具上、在浏览器元素上
谢谢！

更多信息

浏览器支持

评论

发表回复 取消回复

发表回复取消回复