JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popup">
  <div id="button">
    
  </div>
</div>

<div id="trip">

</div>

<div id="gray">

</div>

CSS

div{
  width: 100px;
  height: 100px;
  background: black;
  position: relative;
}

#popup{
  z-index: 100;
  width: 300px;
  height: 300px;
}

#button{  
  top: 10px;
  left: 10px;
  z-index: 100000px;
  background: green;
}

#trip{
  top: 40px;
  left: 10px;
  background: blue;
  z-index: 1000;
}

#gray{
  width: 100%;
  height: 100%;
  position: fixed;
  background: gray;
  top: 0px;
  left: 0px;
  opacity: 0.5;
  z-index: 999;
}