How to rearrange the html so z-index is not needed

[javascriptcoding5678]

I hope someone can help with this.

I have to remove z-index from this code, how would I do that?

I was told z-index can be removed from the code, but I don’t know how it would be done.

That is all I am trying to do here, remove z-index from the code.

Rearranging the html so z-index is not needed.

To remove z-index from the code, the html would need to be rearranged in a different order.

The code has to work without z-index mentioned in the code.

How would I do this? https://jsfiddle.net/krfcog08/

.container {
  z-index: 2;
}

body.bg1:after {
  z-index: 1;
}

<div class="outer">
  <div class="container with-curtain">
    <button class="playa thePlay" type="button" aria-label="Open" pointer-events="none">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
          <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>
    </button>
    <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
      <button class="home" type="button" aria-label="Close">
        <svg class="homesvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <g id="home">
            <title>Home</title>
            <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
            <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
          </g>
        </svg>
      </button>
    </div>
  </div>
  <div class="container with-curtain">
    <button class="playb thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain2">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
      <button class="home" type="button" aria-label="Close">
        <svg class="homesvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#home" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container with-curtain">
    <button class="playc thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain3">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
      <button class="home" type="button" aria-label="Close">
        <svg class="homesvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#home" />
        </svg>
      </button>
    </div>
  </div>
</div>