JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style type="text/css">
    .backdrop {
      position: fixed;
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

    .child {
      background: #fff;
      z-index: 3;
      position: absolute;
    }

    header {
      z-index: 1;
      position: static;
    }

    .fullscreen {

    }
  </style>

</head>

<body>
  <div id="root">
    <div class="fullscreen">
      <header>
        should be below backdrop
        <div class="child">should be above backdrop</div>
      </header>
      <div class="backdrop"></div>
    </div>
  </div>
</body>

</html>