问 从此转换代码中移除z索引。

EN

我将如何对代码进行重组，以便在转换过程中不需要z索引？

没有 的 z-索引： 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-索引： https://jsfiddle.net/Legcb42d/

​

​

，这就是它应该看到的样子.

With z-index： https://jsfiddle.net/rspxkyoL/

​

​