为什么z-index不起作用？

Question

所以,如果我理解z-index正确,在这种情况下它将是完美的:

我想将底部图像(标签/卡片)放在它上面的div下面.所以你看不到锋利的边缘.我该怎么做呢？

z-index:-1 // on the image tag/card

要么

z-index:100 // on the div above

也不起作用.也不是这样的组合.怎么会？

Answer 1

该z-index属性仅适用于元件具有position比其它值static(例如position: absolute;,position: relative;或position: fixed).

position: sticky;Firefox中也支持这种功能,在Safari中加上前缀,在自定义标记下的旧版Chrome中工作了一段时间,Microsoft正在考虑将其添加到Edge浏览器中.

Answer 2

如果您将位置设置为其他值而不是static您的元素z-index仍然不起作用,则可能是某个父元素已z-index设置.

堆叠上下文具有层次结构,并且每个堆叠上下文都以父级堆叠上下文的堆叠顺序来考虑.

所以跟随html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

不管有多大z-index的el3将被设置,它总是会在el1,因为它的父具有较低的堆叠上下文.您可以将堆叠顺序想象为堆叠顺序el3实际为3.8且低于5的级别.

如果要检查父元素的堆叠上下文,可以使用以下命令:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

关于在MDN上堆叠上下文有一篇很棒的文章

Answer 3

您的元素需要具有position属性.(例如绝对,相对,固定)或z-index将不起作用

Answer 4

在许多情况下,必须定位一个元素才能z-index工作.

实际上,应用问题position: relative中的元素可能会解决问题(但是没有提供足够的代码来确定).

其实position: fixed,position: absolute并且position: sticky还将使z-index,但这些值也改变了布局.随着position: relative布局不受干扰.

基本上,只要元素不是position: static(默认设置),它就被认为是定位的并且z-index可以工作.

很多答案"为什么z-index不工作？" 问题断言z-index 只适用于定位元素.从CSS3开始,这已不再适用.

作为弹性项目或网格项目的元素z-index即使在何时position也可以使用static.

从规格:

4.3.Flex项目Z-Ordering

柔性物品油漆完全一样内嵌块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index其它值比auto创建一个堆叠内容即使position是static.

5.4.Z轴订购:z-index属性

的网格项目的绘制顺序是完全一样的内联块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使 position是static.

以下是z-index处理非定位弹性项目的演示:https://jsfiddle.net/m0wddwxs/

Answer 5

确保您想要使用 z-index 控制的该元素没有具有z-index property 的父元素，因为该元素由于其父元素\xe2\x80\x99s z-index 级别而处于较低的堆叠上下文中。

\n

这是一个例子：

\n

<section class="content">            \n    <div class="modal"></div>\n</section>\n\n<div class="side-tab"></div>\n\n// CSS //\n.content {\n    position: relative;\n    z-index: 1;\n}\n\n.modal {\n    position: fixed;\n    z-index: 100;\n}\n\n.side-tab {\n    position: fixed;\n    z-index: 5;\n}\n

\n

在上面的示例中，模态框的 z-index 高于内容，但内容将显示在模态框的顶部，因为“ content ”是具有 z-index 属性的父级。

\n

这里有一篇文章解释了 z-index 可能不起作用的 4 个原因：\n https://coder-coder.com/z-index-isnt-working/

\n

Answer 6

Z-index 需要这些才能工作：

1. 位置：相对、绝对、固定、..
2. 确保父元素没有overflow: hidden;