<div id="my-first-pop-up" popover>Not in top layer</div>
<button class="button ripple" popovertoggletarget="my-first-pop-up">Ascend</button>

@layer normalize, open-props, base, mdl, demo;

@layer demo {
  [popover] {
    display: block;
    transition: all 0.2s;
    box-shadow: var(--shadow-1);
    padding: var(--size-4);
  }

  [popover]:open {
    transform: translateY(-100%) scale(1.5);
    box-shadow: var(--shadow-4);
  }

  .button {
    transform: translateY(200%);
  }

  [popover]::backdrop {
    opacity: 0;
    transition: opacity 0.2s;
    background: url(https://assets.codepen.io/5928893/cloud.svg) -100vw 0 / 100vw
        100vh,
      url(https://assets.codepen.io/5928893/cloud.svg) -300vw 25vh / 100vw 100vh,
      url(https://assets.codepen.io/5928893/cloud-2.svg) -500vw 50vh / 100vw 100vh,
      url(https://assets.codepen.io/5928893/cloud.svg) -150vw 75vh / 100vw 100vh,
      url(https://assets.codepen.io/5928893/cloud-2.svg) -250vw 100vh / 100vw 100vh,
      hsl(207 91% 64% / 0.25);
    animation: sail 60s infinite linear;
  }

  @keyframes sail {
    to {
      background-position: 100vw 0, 300vw 25vh, 500vw 50vh, 150vw 75vh,
        250vw 100vh;
    }
  }

  [popover]:open::backdrop {
    opacity: 1;
  }
}

@layer base {
  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }
  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: auto;
  }
}

const POPUP = document.querySelector("[popover]");

POPUP.addEventListener(
  "show",
  () => (POPUP.innerHTML = "<del>Not</del> In top layer")
);
POPUP.addEventListener("hide", () => (POPUP.innerHTML = "Not in top layer"));