动画时 z-index on::before 的 CSS 问题

Question

你知道为什么当我为父级设置动画时 z-index 在::before 上不起作用吗？

在这里您可以找到我的意思:http://jsfiddle.net/8x3Wa/6/

.object {
    position: relative;
    z-index: 1;
    -webkit-animation: scale 1s infinite ease-in-out;
    animation: scale 1s infinite ease-in-out;
}

.object::before {
    content: "";
    position: absolute;
    z-index: -1;
}

Answer 1

使用:before创建的元素是.object的子元素；因此你不能将它移到其父级后面。相反，使用 :before 和 :after 在 .object 中创建两个元素，然后根据需要重叠这两个元素。

这是 fiddle :http://jsfiddle.net/8x3Wa/7/ .

HTML:

<div class="object"></div>

CSS:

.object {
   position: relative;

   -webkit-animation: scale 1s infinite ease-in-out;
   animation: scale 1s infinite ease-in-out;
}

.object::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 20px solid red;
    z-index: 1;
}

.object::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    border: 10px solid blue;  
    z-index: -1;
    top: 20px;
    left: 20px;
}


@keyframes scale {
  0%   { transform: scale(1, 1); }
  50%  { transform: scale(.5, .5); }
  100% { transform: scale(1, 1); }}

@-webkit-keyframes scale {
  0%   { -webkit-transform: scale(1, 1); }
  50%  { -webkit-transform: scale(.5, .5); }
  100% { -webkit-transform: scale(1, 1); }
}