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

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

阅读 18.8k
评论 更新于 2017-01-22
    5 个回答
    KevinYue
    • 5.2k

    这里涉及到一个stacking context(有人翻译为层叠上下文)的概念。

    给元素设置transform属性会创建一个新的stacking context

    请看下面的具体讲解:

    注:以下两个例子最好先想象一下预览效果,再查看结果预览页面。

    先上一个小例子:

    http://jsfiddle.net/2tss9rp3/embedded/html,css,result

    上面这个例子中,两个div都没有设置任何position,如果没有给test-1添加transform属性的话,第二个div将会覆盖第一个div。但是如果设置了transform的话呢?由于transform会创建一个新的stacking context。在层级关系上就要比test-2高一级,因此,显示在上面。

    再来一个例子,

    http://jsfiddle.net/2tss9rp3/1/embedded/html,css,result

    这个例子了是对上面那个例子作了个简单的修改。我们给test-1添加了一个position: relativetest-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都没有用。但是如果将.innertransform去掉就不一样了。试试看。

    http://jsfiddle.net/2tss9rp3/4/embedded/html,css,result

    参考链接

    评论 赞赏 2015-01-13

      transform是插件定义的父元素引起子元素z-index失效 怎么办~~
      我也知道去掉transform 没别的办法么

      评论 赞赏 2018-01-25

        刚好遇到了这个问题

        评论 赞赏 2017-08-14
          山中隐士
          • 1
          • 新人请关照

          对于此问题,我的解决方法是
          {
          position:absolute;
          z-index:1
          }
          联合使用,手动指定图形位置。

          评论 赞赏 2018-03-19
            西红柿炒鸡蛋
            • 2
            • 新人请关照

            在绑定transform元素的父级的上一层父级写: transform-style: preserve-3d;如何呈现3d空间里面的子元素,然后就可以用z-index了

            评论 赞赏 2018-03-23
              撰写回答

              登录后参与交流、获取后续更新提醒