<div class="container">
  <div>z-index: 100</div>
  <div>z-index: 100</div>
</div>
<div class="modal">z-index: 1</div>

<label>
  <input type="checkbox" />&nbsp;toggle&nbsp;isolate
</label>

body {
  display: grid;
  place-items: center;
  place-content: center;
  height: 100vh;
  font-family: monospace;
  font-size: 18px;
  user-select: none;
}

label {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 10px;
}

.container {
  position: absolute;
  top: 10px;

  &.--isolate {
    isolation: isolate;
    // transform: scale(1);
  }

  > div {
    position: absolute;
    width: 20vw;
    height: 50vh;
    background-color: rgba(255,221,221, 0.8);
    padding: 20px;
    z-index: 100;

    &:nth-child(1) {
      left: 10px;
    }

    &:nth-child(2) {
      right: 10px;
    }
  }
}

.modal {
  position: absolute;
  width: 70vw;
  height: 25vh;
  top: 80px;
  padding: 20px;
  background-color: rgba(204,255,204, 0.8);
  z-index: 1;
}

const container = document.querySelector(".container");
const input = document.querySelector("input");

input.addEventListener("click", (e) => {
  const { checked } = e.target;
  container.classList.toggle("--isolate", checked);
});