Проблема CSS с z-index на ::before при анимации

Знаете ли вы, почему 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;
}

animation css z-index pseudo-element
person user2967278    schedule 01.07.2014    source источник
comment
Взгляните на это: stackoverflow.com/ вопросы/7822078/   -  person Jon    schedule 02.07.2014
comment
Не могу поверить, что вы нашли эту ошибку в браузере. хе-хе   -  person Ignacio Correia    schedule 02.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Элемент, созданный с использованием :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); }
}
person DRD    schedule 01.07.2014