從此轉換代碼中刪除 z-index

Question

我將如何重構代碼以便在轉換時不需要 z-index？

沒有z-index： https : //jsfiddle.net/Legcb42d/

.container1 {
  position: relative;
  width: 100%;
  height: 100%;
}

.container1.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.door-left,
.door-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
}

.door-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
}

.door-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
}

.container1.slide .door-left {
  left: -50%;
}

.container1.slide .door-right {
  left: 100%;
}

<div class="container1 ">
<div class="door-left"></div>
<div class="door-right"></div>

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
    document.querySelector(".container1").classList.add('slide');
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container");
    hide(cover);
    show(thewrap);
  }
  const cover = document.querySelector(".jacketa");
  cover.addEventListener("click", coverClickHandler);
}());

它不應該看起來像這樣。

沒有z-index： https : //jsfiddle.net/Legcb42d/

這是它應該看起來的樣子。

使用z-index： https : //jsfiddle.net/rspxkyoL/

Answer 1

為什么不是z-index ？ 如果您認為如果增加門的播放按鈕將被隱藏，那么您還可以增加播放按鈕的 z-index。

添加 z-index

.door-left,
.door-right {
   ...
   z-index: 1;
}

.jacketa {
   ...
   z-index: 2;
}

這是一個工作小提琴