JSFiddle - React, Tailwind, and code Playground

HTML

<!------------------------------------------------------->
<!-- hover over the purple and yellow elements         -->
<!-- scroll                                            -->
<!-- try to put the yellow <div> behind red <div>      -->
<!-- Do not want yellow to scroll up like purple does  -->
<!-- but want yellow behind red                        -->
<!------------------------------------------------------->
<div class="header">fixed
  <div class="divinheader">fixed1</div>
</div>
<div class="content">relative</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>---</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>---</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>---</p>

CSS

.header {
  background-color: red;
  position: fixed;    /* has to be fixed -- not an option to change this value */
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  z-index: 5;
}

.divinheader {
  background-color: yellow;
  position: fixed;   /* changed this for every option of position, but still doesn't achieve goal */
  padding-top: 50px;
  top: 0;
  left: 90%;
  width: 8%;
  height: 20px;
  text-align: center;
  z-index: 2;      /* less than the z-index of parent  (2 < 5) */
}

.content {
  background-color: purple;
  padding-top: 45px;
  padding-bottom: 1px;
  position: relative;
  top: 0;
  left: 0;
  width: 100px;
  height: 30px;
  text-align: center;
}

p {
  margin-left: 50px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.content:hover {
     top: 24px;
     transition: all 0.7s ease-in-out 0s;
}

.content:not(:hover) {
     top: 0px;
     transition: all 0.7s ease-in-out 0s;
}

.divinheader:hover {
     top: 24px;
     transition: all 0.7s ease-in-out 0s;
}

.divinheader:not(:hover) {
     top: 0px;
     transition: all 0.7s ease-in-out 0s;
}