CSS中关于z-index的常见误解有哪些？

本文共计3913个文字，预计阅读时间需要16分钟。

原文地址：What You May Not Know About the Z-Index Property原文作者：Steven Bradley译者：Chorz-index 这个属性看起来很简单，但如果你想搞清楚其工作原理的话，实际上有很多值得探究的地方。

• 原文地址：What You May Not Know About the Z-Index Property
• 原文作者：Steven Bradley
• 译者：Chor

​​z-index​​ 这个属性表面看上去很简单，但如果你想搞清楚其工作原理的话，其实是有不少值得探讨之处的。本文将从层叠上下文（stacking contexts）和一些实际案例出发，谈一谈 ​​z-index​​ 的内部工作原理。

CSS 为盒模型的布局提供了三种不同的定位方案^[1] ：

• 正常文档流
• 浮动
• 定位

最后一种方案（特指绝对定位）将会把元素从正常文档流中完全移走，其最终的落脚点将取决于开发者。

通过设置 ​​top​​​，​​left​​​，​​bottom​​​ 和 ​​right​​ 的值，你可以在二维空间中对元素进行定位，但 CSS 同时也允许你使用 z-index 属性^[2] 把它放置在三维空间中。

表面看起来，​​z-index​​ 似乎是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置，就这样。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。