JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="MaDivScroll">
    <p>
      Je suis l'élément parents de bulleText 
    </p> 
    <span id="bulleText">
      bulleText
    </span>
  </div>
  
  <div id="DivMenus">
    <span id="bulleText2">
      Je suis un élément de ma div menu
    </span>
  </div>
</body>

CSS

#MaDivScroll{
  position:absolute ; 
  top : 0; 
  left: 0 ; 
  height:100% ; 
  background-color:#efefef ; 
  width:100% ;
  text-align:center ;
}

#DivMenus{
  position:absolute ; 
  bottom : 0; 
  left: 0 ; 
  height:30% ; 
  width:100% ; 
  background-color:red; 
  text-align:center ; 
  z-index:2
}

#bulleText{
  color:red ;
  background-color: white ; 
  padding: 20px ; 
  text-align:center; 
  display:inline-block ; 
  border-radius:10px ; 
  position:absolute ; 
  bottom:10% ; 
  left:0 ; 
  right:0 ; 
  margin:auto ; 
  width:200px ; 
  z-index:3 ; 
}

#bulleText2{
  color:blue ;
  background-color: orange ; 
  padding: 10px ; 
  text-align:center; 
  display:inline-block ; 
  border-radius:10px ; 
  width:300px ; 
  position:relative ; 
  z-index:2
}