z-индекс игнорируется на дочерних элементах анимированного контейнера

Question

Ссылаясь на этот пример: https://codepen.io/jyloo/pen/KKwoLKB

Я заметил, что у меня есть анимированный контейнер с анимацией-режимом заполнения, установленным для пересылки, дочерние элементы с абсолютным позиционированием (всплывающие) внутри он не отображается должным образом, и кажется, что их z-индекс игнорируется.

Моя анимация:

.animate {
  animation-direction: reverse;
}

.animate.animate--from-bottom {      
  opacity: 0;
  animation: from-bottom 0.3s ease-out;
  animation-fill-mode: forwards;  
}

@keyframes from-bottom {
  0% {transform: translateY(80px);opacity:0;}
  100% {transform: translateY(0px);opacity:1;}
}

Мой дочерний элемент (всплывающее окно)

.popup {
  z-index: 10;
  position: absolute;
  background: white;
  padding: 0 1rem;
  box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
  width: calc(300px - 2rem);
}

Если я удаляю режим анимации-заполнения, дочерние элементы отображаются нормально.

Может ли кто-нибудь помочь мне понять это поведение и обходной путь, чтобы мой дочерний элемент (всплывающее окно) мог работать, находясь под и анимированный родитель.

Answer 1

вы можете использовать свойство css, как показано ниже для 3-го деления.

Чтобы сделать содержимое 2-го деления видимым сверху, вы можете попробовать установить для 3-го z-индекса более низкое значение.

.dv {
  position: relative;
  z-index: -1;
}

демо - https://codepen.io/AB-DEV/pen/LYEdKPj.

Answer 2

Вы должны добавить класс к родительскому <div> всплывающего окна.

предположим, что я добавил класс have_popup к родительскому div всплывающего окна <div class="card have_popup">.

теперь применимо css к этому классу, как показано ниже:

.have_popup {
    position: relative;
    z-index: 1;
}

Я надеюсь, что это будет хорошо работать для вас.

Спасибо ...