z-index和transform
作者：大漠 日期：2016-08-19 点击：8365
特别声明：小站对部分原创文章已开启付费阅读，并开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)
z-index和transform是CSS中的属性，但很少同学将二者联系到一起，感觉他们八杆子打不上。事实真的是这样吗？如果你也不能确认，这篇文章就值得你花点时间阅读。因为阅读完了，你会有所收获的。
堆叠上下文(Stacking Context)
在开始今天的主题之前，先得回忆一下CSS中的Stacking Context(堆叠上下文)。因为只有了解清楚了这个概念，才能更好的了解下面的内容。
任何HTML文档默认的堆叠上下文都是<html>元素。因此，除非创建新的堆叠上下文。默认情况下，元素的堆叠顺序相对于页面内的其他元素。在一个未做堆叠顺序更换的页面中，其顺序就是根据HTML中的元素出现的先后顺序来决定，先出现的在底下，后出现的在顶部。用数字来表示的话是就1,2,3,4,...,n这样的顺序。比如下面的示例：
第二个div做了一个margin-top的-50px，可以看到第二个div遮住了第一个div。那么怎么才能改变默认的堆叠顺序呢？
先把结论给大家抛出来，在CSS中可以使用z-index和transform可以改变元素的堆叠顺序。但也可能会导致一些奇怪的情况，比如具有较大的z-index的元素并不总是位于具有较低z-index元素的上方。比如，在一些情况之下，同时使用z-index和transform会让z-index失效等。
CSS中会产生新的层情况还有很多种：
- 当一个元素位于HTML文档的最外层（
<html>元素）- 当一个元素被定位了并且拥有一个
z-index值（不为auto）- 当一个元素被设置了
opacity，transforms,filters,css-regions,paged media等属性flex item，也就是父元素的display设置了flex或者inline-flex值，早期的box值不行grid item,也就是父元素的display设置了grid或者inline-grid值isolation:isolate- 元素的
mix-blend-mode值不为normal- 元素的
overflow-scrolling值不为touch- 元素的
filter值不为none- 元素的
perspective值不为none
剩余80%内容付费后可查看
如需转载，烦请注明出处：https://www.w3cplus.com/css/3d-transform-and-z-index.html
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
赏杯咖啡，鼓励他创作更多优质内容！
