<main>
      <div class="wrapper">
        <article class="flow">
          <h1>Stacking contexts</h1>
          <figure class="callout">
            <p>
              Even though the first element’s child element has a <code>z-index</code> of
              <code>999</code>, it still sits below the second element and its child
              element because both elements have their own stacking context and the second
              element has a higher <code>z-index</code>.
            </p>
          </figure>
          <div class="top">
            <code>z-index: 1;</code>
            <div class="inner">
              <code>z-index: 999;</code>
            </div>
          </div>
          <div class="bottom">
            <code>z-index: 2;</code>
            <div class="inner">
              <code>z-index: 2;</code>
            </div>
          </div>
        </article>
      </div>
    </main>

.top,
.bottom {
  width: 250px;
  padding: 80px 20px;
  position: relative;
}

.inner {
  padding: 20px;
}

.bottom {
  z-index: 2;
  margin-top: -90px;
  opacity: 0.8;
  box-shadow: 0 -1px 10px rgba(0 0 0 / 60%);
}

.top {
  z-index: 1;
  background: aliceblue;
  border: 2px solid lightblue;
}

.bottom {
  background: pink;
  border: 2px solid hotpink;
}

.inner {
  background: wheat;
  border: 2px solid gold;
}

.top > .inner {
  z-index: 999;
}

.bottom > .inner {
  z-index: 2;
}