Question

你知道为什么z-index在我为父母设置动画之前没有工作吗？

在这里你可以找到我的意思：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中创建两个元素，然后根据需要重叠两个元素。

这里是小提琴：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); }
}

在动画时使用z-index on ::之前的CSS问题

1 个答案: