Сохранение z-индекса в конце перехода CSS3 в Safari

Question

Я хочу изменить z-индекс div, щелкнув по нему, только с помощью CSS3. Я могу добиться этого с помощью своего кода во всех браузерах, кроме сафари. Я уже пробовал это с: target transition и: target animation (с использованием animation-fill-mode: forward), и оба они не работают.

Вот мой код (упрощенный):

#flap1 {
z-index: 30;
}

#flap1:target {
transition: all 1s ease-in-out;
z-index: 1;
}

Как сохранить z-index в конечном значении (= 1)? Во время анимации z-index меняет свое значение.

Answer 1

Я не уверен, что это можно сделать с помощью CSS. Вы можете запустить простую функцию JavaScript, чтобы получить этот эффект. Кроме того, элементы с z-индексом должны быть позиционированы относительным, абсолютным или фиксированным, чтобы z-индекс вступил в силу.

CSS:

#flap1 {
  position: relative; /* Change positioning to your liking */
  z-index: 30;
  transition: all 1s ease-in-out;
}

JavaScript:

var box = document.getElementById('flap1');

box.addEventListener('click', function() {
  this.style.zIndex = '1';
});