Почему анимация css меняет z-index?
Почему анимация меняет z-index?
Если вы посмотрите на jsfiddle, вы увидите, что красное изображение находится сверху, но если вы закомментируете анимацию, синее изображение будет сверху. Как сделать так, чтобы синее изображение всегда было сверху даже с анимацией?
HTML
<img class = "blue" src = "http://via.placeholder.com/200/0037ff">
<img class = "red" src = "http://via.placeholder.com/200/ff0010">
CSS
.red {
-webkit-animation-name: red;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: red;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.blue {
transform: translate(30%);
}
@keyframes red {
from {
transform: translate(50%);
}
to {
transform: translate(0);
}
}
Любая помощь высоко ценится!
Ответы 3
CSS-анимации сбросить z-index.
Итак, что вам, вероятно, нужно сделать, это присвоить красному изображению z-index 0, а синему изображению - z-index 1.
Вы также установили z-index для @keyframes, как от, так и до? Кажется, это работает: jsfiddle.net/0wquLz46/23
Элементы в HTML располагаются на оси Z в соответствии с их контекст наложения.
По умолчанию страница имеет 1 контекст наложения - элемент HTML - и все дочерние элементы контекста наложения располагаются в соответствии с их порядком DOM.
Однако новый контекст наложения может быть создан для элемента при применении определенных свойств CSS. Такие свойства, как position: absolute или position: relative, обычно используются для создания новых контекстов наложения, поэтому вы можете позиционировать их на оси Z с помощью z-index. Когда создается новый контекст наложения, он по умолчанию располагается над родительским контекстом наложения.
transform - это еще одно свойство CSS, которое будет создавать новый контекст наложения (поскольку вы можете преобразовывать элемент по оси Z). Поскольку элемент .blue имеет transform, а элемент .red не имеет, когда вы комментируете анимацию, он получает новый контекст наложения, который по умолчанию находится над родительским контекстом наложения (который включает элемент .red).
Итак, чтобы коробка .blue всегда оставалась на высоте, вам нужно добавить к ней position: relative и z-index: 1.
.blue {
position: relative;
z-index: 1;
transform: translate(30%);
}
Почему бы вам не указать значение z-index на .blu?
попробуй это:
.blue{
z-index: 999;
transform: translate(30%);
}
Добавление z-индекса не помогает
Я вижу, это работает только в Firefox, извини, чувак.
ОБНОВЛЕНИЕ: добавить позицию: relative в .blue и попробовать
Добавление z-индекса ничего не дало.