CSS3 Transform 引起的 z-index "失效"

Question

我是在做仿谷歌的tab栏的切换，就是当激活时，底线的线层级会是最高的，底线就会被挡住，我不用transfrom:translateX，z-index可以让我实现激活的底线会不见，但是用了transfrom:translateX就不行了

<div 这个盒子用了transfrom:translateX>

   <div   这个盒子用了z-index=5></div>

</div>
<div 这个盒子是底线，用了z-index=10></div>

我后面也找了其他人的解决方法来看
http://www.w3cplus.com/css/3d...
但是实现不了，想请求一下

Answer 1

当你 transform 之后，这个元素就是一个独立的“空间”了，是会影响到 z-index 的。

http://www.zhangxinxu.com/wor...

z-index值不为auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的属性值为上面任意一个。
元素的-webkit-overflow-scrolling设为touch.