问题：CSS3 Transform 引起的 z-index "失效"
两个页面使用的css3 Transform动画之后，页面下子元素的z-index就失效了，就算设置的再大的值也不会起作用，但是一个页面的时候是没有问题的

回答：这里涉及到一个`stacking context`（有人翻译为`层叠上下文`）的概念。
给元素设置`transform`属性会创建一个新的`stacking context`。
请看下面的具体讲解：
注：以下两个例子最好先想象一下预览效果，再查看结果预览页面。
先上一个小例子（你可以在https://jsfiddle.net/运行）：
```html
'<div class="test test-1">
</div>
<div class="test test-2">
</div>
```
```css
.test {
    width: 100px;
    height: 100px;
}

.test-1 {
    -webkit-transform: scale(.9);
    transform: scale(.9);
    /*opacity: 0.9*/
    background: #f20;
}

.test-2 {
    margin-top: -50px;
    background: #000;
}
```
上面这个例子中，两个div都没有设置任何`position`，如果没有给`test-1`添加`transform`属性的话，第二个div将会覆盖第一个div。但是如果设置了`transform`的话呢？由于`transform`会创建一个新的`stacking context`。在层级关系上就要比`test-2`高一级，因此，显示在上面。
再来一个例子，
```html
'<div class="test test-1">
</div>
<div class="test test-2">
</div>
```
```css
.test {
    width: 100px;
    height: 100px;
}

.test-1 {
    position: relative;
    background: #f20;
}

.test-2 {
    -webkit-transform: scale(.9);
    transform: scale(.9);
    margin-top: -50px;
    background: #000;
}
```
这个例子了是对上面那个例子作了个简单的修改。我们给`test-1`添加了一个`position: relative`，`test-2`没有任何`position`属性，只是添加了一个`transform`的属性。如果不看预览页面的话，可能会以为`test-1`会显示在`test-2`上方，其实不然。由于`transform`会创建新的`stacking context`，同时`test-2`在文档中又处于`test-1`的后面，所以最终的效果是`test-2`显示在`test-1`的上方。
那么问题来了，哪些情况下会创建新的`stacking context`呢？
MDN上有相关的介绍：
- the root element (HTML),
- positioned (absolutely or relatively) with a z-index value other than "auto",
- a flex item with a z-index value other than "auto",
- elements with an opacity value less than 1,
- elements with a transform value other than "none",
- elements with a mix-blend-mode value other than "normal",
- elements with isolation set to "isolate", on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto",
- specifing any attribute above in will-change even you don't write themselves directly

其中，第二条是我们平时最常见的，另外几条加粗的会随着CSS3的普及越来越常见。令我感到惊奇是，`opacity`竟然也会创建新的`stacking context`，你可以试着将上面两个例子中的`transform`换成`opacity`，会得到同样的效果。
值得注意的是，介绍`stacking context`的文章显然不像介绍CSS中另外一个“上下文”——`Block formatting context`（块级格式上下文）的文章多，原因可能是，我们在平常很少遇到`stacking context`相关的问题，但是随着CSS3的普及，这方面的问题可能会多起来的。
这也算是CSS中一个比较有趣而且有用的知识点，之前在工作中遇到过一次，正好此处有人问到，特整理了一下，供参考。
### 补充
说了这么多，回到你这个具体的问题上来，由于你没有提供具体的代码，不好说出具体的问题所在，但可以推测出你的代码中可能有类似下面这个例子中的结构。你给`.child`设置再大的`z-index`都没有用。但是如果将`.inner`的`transform`去掉就不一样了。试试看。
```html
<div class="test test-1">
    <div class="inner">
        <div class="child">
            Child
        </div>
    </div>
</div>
<div class="test test-2">
</div>
```
```css
.test {
    width: 100px;
    height: 100px;
}

.test-1 {
    position: relative;
    background: #f20;
}

.inner {
    width: 80px;
    height: 80px;
    transform: scale(1); /*此处会产生新的stacking context*/
    background: green;
}

.child {
    position: absolute;
    bottom: 15px;
    color: #fff;
    font-size: 30px;
    z-index: 1000;
}

.test-2 {
    position: relative;
    margin-top: -50px;
    background: #000;
}
```
### 参考链接
- [The stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)

标签: css3动画