CODEWITHSUNDEEP
javascripthtmlcsscss-transitionsz-index
user10897505
user10897505

Reputation:

Removing z-index from this transition code

How would I go about restructuring the code so that z-index isn’t needed on the transition?

Without 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);
}());

It's not supposed to look like this.

Without z-index: https://jsfiddle.net/Legcb42d/

enter image description here

This is how it should look.

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

enter image description here

Upvotes: 0

Views: 150

Answers (1)

Sameer
Sameer

Reputation: 5188

Why not z-index? If you are thinking that the play button will be hidden if you increase it for doors then you can also increase the play button's z-index.

Add z-index for

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

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

Here is a working fiddle

Upvotes: 2

Related Questions