Html 为什么 z-index 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9191803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does z-index not work?
提问by Linkjuice57
So if I understand z-indexcorrectly, it would be perfect in this situation:
因此，如果我理解z-index正确，在这种情况下将是完美的：
I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?
我想将底部图像（标签/卡片）放在其上方的 div 下方。所以你看不到锋利的边缘。我该怎么做呢？
z-index:-1 // on the image tag/card
or
或者
z-index:100 // on the div above
doesn't work either. Neither does a combination of anything like this. How come?
也不起作用。像这样的组合也没有。怎么来的？
回答by Evert
The z-indexproperty only works on elements with a positionvalue other than static(e.g. position: absolute;, position: relative;, or position: fixed).
该z-index属性仅适用于position值不是static（例如position: absolute;、position: relative;、 或position: fixed）的元素。
There is also position: sticky;that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
还有position: sticky;Firefox 支持，在 Safari 中带有前缀，在旧版本的 Chrome 中使用自定义标志，微软正在考虑将其添加到他们的 Edge 浏览器中。
Important
For regular positioning, be sure to include position: relativeon the elements where you also set the z-index. Otherwise, it won't take effect.
重要
对于常规定位，请确保position: relative在您还设置z-index. 否则不会生效。
回答by Buksy
If you set position to other value than staticbut your element's z-indexstill doesn't seem to work, it may be that some parent element has z-indexset.
如果您将位置设置为其他值，static但您的元素z-index似乎仍然不起作用，则可能是某些父元素已z-index设置。
The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.
堆叠上下文具有层次结构，每个堆叠上下文都按照父级堆叠上下文的堆叠顺序进行考虑。
So with following html
所以用下面的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>no matter how big the z-indexof el3will be set, it will always be under el1because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3is actually 3.8which is lower than 5.
不管多大z-index的el3将被设置，它总是会在el1，因为它的母公司具有较低的堆叠内容。您可以将堆叠顺序想象为堆叠顺序el3实际上是3.8 的级别，低于5。
If you want to check stacking contexts of parent elements, you can use this:
如果要检查父元素的堆叠上下文，可以使用：
var el = document.getElementById("#yourElement"); // or use ##代码## in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
回答by clem
Your elements need to have a positionattribute. (e.g. absolute, relative, fixed) or z-indexwon't work.
您的元素需要有一个position属性。（例如absolute, relative, fixed）或z-index不起作用。
回答by Michael Benjamin
In many cases an element must be positioned for z-indexto work.
在许多情况下，必须定位元素才能z-index工作。
Indeed, applying position: relativeto the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).
事实上，应用position: relative到问题中的元素可能会解决问题（但没有提供足够的代码来确定）。
Actually, position: fixed, position: absoluteand position: stickywill also enable z-index, but those values also change the layout. With position: relativethe layout isn't disturbed.
其实position: fixed，position: absolute并且position: sticky还将使z-index，但这些值也改变了布局。随着position: relative布局不被打扰。
Essentially, as long as the element isn't position: static(the default setting) it is considered positioned and z-indexwill work.
本质上，只要元素不是position: static（默认设置），它就被认为是定位的并且z-index可以工作。
Many answers to "Why isn't z-index working?"questions assert that z-indexonlyworks on positioned elements. As of CSS3, this is no longer true.
“为什么 z-index 不起作用？”的许多答案 问题断言z-index仅适用于定位元素。从 CSS3 开始，这不再是事实。
Elements that are flex itemsor grid itemscan use z-indexeven when positionis static.
弹性项目或网格项目的元素z-index即使在positionis时也可以使用static。
From the specs:
从规格：
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-indexvalues other thanautocreate a stacking context even ifpositionisstatic.5.4. Z-axis Ordering: the
z-indexpropertyThe painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and
z-indexvalues other thanautocreate a stacking context even ifpositionisstatic.
Flex 项目的绘制与内联块完全相同，除了使用顺序修改的文档顺序代替原始文档顺序，以及创建堆叠上下文
z-index以外的值，auto即使position是static.网格项的绘制顺序与内联块完全相同，除了使用顺序修改的文档顺序代替原始文档顺序，以及创建堆叠上下文
z-index以外的值，auto即使position是static。
Here's a demonstration of z-indexworking on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
这是z-index处理非定位弹性项目的演示：https: //jsfiddle.net/m0wddwxs/
