JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container fixed">
  <p>
    container fixed
  </p>
</div>

<div class="container margin-top">
  <p>
    container relative
  </p>
</div>

<div class="container z-index">
  <p>
    container relative with z-index
  </p>
</div>

CSS

.container {
  position: relative;
  top: 0;
  height: 30px;
  width: 200px;
  background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));
}

.container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  z-index: -1;
}

.fixed {
  position: fixed;
}

.margin-top {
  margin-top: 50px;
}

.z-index {
  z-index: 1;
}