У меня есть два абсолютно позиционированных элемента div, которые перекрываются. Оба установили значения z-index через css. Я использую translate3d
преобразование webkit для анимации этих элементов за пределами экрана, а затем обратно на экран. После преобразования элементы больше не соблюдают свои установленные z-index
значения.
Может ли кто-нибудь объяснить, что происходит с z-index / stack-order элементов div, когда я выполняю преобразование webkit для них? И объясните, что я могу сделать, чтобы сохранить порядок стека элементов div?
Вот еще немного информации о том, как я выполняю преобразование.
Перед преобразованием каждый элемент получает эти два значения перехода webkit, установленные через css (я использую jQuery для выполнения .css()
вызовов функций:
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
Затем элемент анимируется с помощью translate3d -webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Кстати, я попытался установить для третьего параметра translate3d
несколько разных значений, чтобы попытаться воспроизвести порядок стека в трехмерном пространстве, но безуспешно.
Кроме того, браузеры iPhone / iPad и Android - это мой целевой браузер, в котором должен работать этот код. Оба поддерживают переходы через webkit.
Ответы:
Это может быть связано с: https://bugs.webkit.org/show_bug.cgi?id=61824
В основном, когда вы применяете 3D-преобразование к оси z, z-index больше не может быть учтен (теперь вы находитесь в трехмерной плоскости рендеринга, используйте другие z-значения). Если вы хотите вернуться к 2D-рендерингу дочерних элементов, используйте
transform-style: flat;
.источник
transform-style: flat;
.Это определенно связано с ошибкой, отмеченной samy-delux. Это должно затронуть только те элементы, которые позиционируются как абсолютные или относительные. Чтобы решить эту проблему, вы можете применить следующий оператор css к каждому элементу, который расположен таким образом и вызывает проблемы:
Это применит преобразование к элементу, фактически не выполняя преобразование, но влияя на его порядок рендеринга, чтобы он находился над элементом, вызывающим проблему.
источник
Немного поздно, но попробуйте надеть элементы, которые потеряли свой Z-индекс, разместив следующее: у меня недавно возникла проблема, когда я делал некоторые вещи с параллаксом, и это очень помогло.
Это экономит
На других элементах, которые увеличивают нагрузку на графический процессор
источник
Жду примера
Вы пробовали сделать масштаб трансформации (1)? Я помню, что у меня была аналогичная проблема, и мне пришлось переупорядочить html-порядок элементов и использовать преобразование, которое мне не нужно, только потому, что изменился z-индекс использования преобразования.
Если я не ошибаюсь, каждый раз, когда вы используете преобразование, он становится наивысшим доступным z-индексом и упорядочивается по ближайшему элементу html к началу тега. Итак, снизу вверх.
Я надеюсь что это поможет
источник
z-index
будет работать с трехмерными преобразованными div, если вы стилизуете штабелируемый элемент с помощью-webkit-transform: translateZ(0px);
Фрагмент кода на codepen -> http://codepen.io/mrmoje/pen/yLIul
В этом примере кнопки
stack up
иstack down
поднимают и опускают z-index нижнего колонтитула (+/- 1) относительно повернутого элемента (в данном случае img).источник
Мне не удалось воспроизвести описанную здесь проблему. Независимо от того, что я делаю, значение z-index сохраняется во всех преобразованиях. Тестирую с помощью Chromium (Google Chrome).
Третий аргумент функции translate3d управляет осью z элемента. Концепция похожа, но не совсем такая же, как z-index ... Элементы с более низкой осью z находятся под элементами с более высоким значением.
Я знаю, что вы пробовали значения третьего аргумента, чтобы они соответствовали предполагаемому z-индексу, но проблема в том, что ось z не меняется во время анимации CSS3. В следующем примере зависший элемент должен быть сверху, а #element_a остается сверху.
Если я добавлю z-index как к обычному селектору, так и к селектору: hover, он, похоже, сработает и позволит элементу, на который наведен курсор, быть самым верхним.
Хотя это не совсем то, что вы искали, такое поведение дает решение. Вам просто нужно использовать translate3d и z-index, чтобы установить порядок начального рендеринга.
источник
Другой способ обойти это - создать родительский элемент и применить все другие переходы, связанные с ним:
JsFiddle
источник