在使用CSS3中的transform属性时，我们可能会遇到一个奇怪的问题：transform会覆盖z-index的顺序。通常，当我们在HTML元素中定义z-index时，它们的层次关系就会被确定下来，更高的z-index值将覆盖较低的z-index值。但是如果我们同时使用了transform属性，则这种行为就会发生改变。
问题描述
考虑以下代码：
---- -------------- ---------------- --------- -------- ---
---- ------------- ---------------- --------- -------- --- ---------- ------------------
- -- - ----------- ------
------
------我们期望子元素.child应该出现在父元素.parent之上，因为它的z-index值比父元素高。但是实际情况却不是这样的——由于子元素应用了transform属性，它的层级关系被提高了，因此它会出现在父元素之前。
这个问题只存在于使用Webkit内核的浏览器（Chrome、Safari等）。Firefox和IE等其他浏览器则没有这个问题。
问题原因
这个问题的根本原因是Webkit内核对于z-index和transform属性的处理方式不一样。具体来说，它首先应用了transform，然后才根据z-index值确定元素的层次关系。
这种行为可能会导致一些意想不到的结果。例如，当我们使用javascript动态地修改transform值时，元素的z-index顺序也会随之改变。这可能会使应用程序出现奇怪的视觉效果或交互问题。
解决方案
要解决这个问题，我们需要使用一些技巧来避免z-index和transform之间的冲突。
一种方法是使用CSS3中的translateZ()函数，该函数允许我们在三维空间中移动元素。通过将元素向屏幕内部移动，我们可以确保其出现在其他元素之前。例如：
---- -------------- ---------------- --------- -------- ---
---- ------------- ---------------- --------- ---------- ---------------- -------------- -------- -----
- -- - ----------- ------
------
------另一种方法是使用更高的z-index值来强制覆盖所有其他元素。例如：
---- -------------- ---------------- --------- -------- ---
---- ------------- ---------------- --------- ---------- ----------------- -------- -------
- -- - ----------- ------
------
------尽管这种方法在某些情况下可能会起作用，但它并没有真正解决问题，可能会导致其他的层叠样式问题。
结论
在使用transform属性时，我们需要特别注意z-index值的顺序。如果我们想确保元素的层次关系正确，可以使用CSS3中的translateZ（）函数或更高的z-index值来避免与transform属性之间的冲突。
这个问题的出现是对我们编写CSS的一种挑战，同时也让我们意识到，在Web开发中，我们需要理解底层工作原理以及不同浏览器之间的差异，并采取适当的措施来确保我们的应用程序能够在各种环境中正常运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28631