z-index上的CSS問題::之前動畫時

Question

你知道爲什麼z-index不能在::之前工作，當我動畫父項？

在這裏您可以找到我的意思：使用:beforehttp://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

的元素創建爲.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); } 
}