I cannot put menu above text

Question

   function toggleSidebar(ref) {
  ref.classList.toggle('active');
  document.getElementById('sidebar').classList.toggle('active');
}

    #sidebar {
  position:absolute;
  
  top:0px;
  right:0px;
  width:600px;
  height:100vh;
  background:#1a1a1a;
  text-align:center;
  transform-origin:right;
  transform:perspective(1200px) rotateY(90deg);
  transition:all 400ms ease;
}
#sidebar ul li {
  color:#ccc;
  font-size:20px;
  width:100%;
  height:50px;
  border-bottom:1px solid #222222;
  line-height:50px;
}
#sidebar.active {
  transform:perspective(1200px) rotateY(0deg);
}



#toggle-btn {
  position:absolute;
  right:30px;
  top:20px;
  transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
  right:auto;
  transform:rotate(360deg);
}
#toggle-btn span {
  position:relative;
  top:0px;
  display:block;
  background:#1a1a1a;
  width:30px;
  height:5px;
  margin:5px 0px;
  cursor:pointer;
  transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
  top:10px;
  transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
  opacity:0;
}
#toggle-btn.active span:nth-child(3) {
  top:-10px;
  transform:rotate(-45deg);
}

If you have any questions here the Link http://99gourmet.000webhostapp.com/

Answer 1

How are you working with position:absolute and is not declaring the z-index, the browser will stack your Ivs as they are declared in your html. Add the attribute z-index: 2000; in the css of #sidebar. (2000 is an arbitrary number and I put a high value just for the example)

function toggleSidebar(ref) {
  ref.classList.toggle('active');
  document.getElementById('sidebar').classList.toggle('active');
}

#sidebar {
  position:absolute;
  
  top:0px;
  right:0px;
  width:600px;
  height:100vh;
  background:#1a1a1a;
  text-align:center;
  transform-origin:right;
  transform:perspective(1200px) rotateY(90deg);
  transition:all 400ms ease;
  z-index: 2000;
}
#sidebar ul li {
  color:#ccc;
  font-size:20px;
  width:100%;
  height:50px;
  border-bottom:1px solid #222222;
  line-height:50px;
}
#sidebar.active {
  transform:perspective(1200px) rotateY(0deg);
}



#toggle-btn {
  position:absolute;
  right:30px;
  top:20px;
  transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
  right:auto;
  transform:rotate(360deg);
}
#toggle-btn span {
  position:relative;
  top:0px;
  display:block;
  background:#1a1a1a;
  width:30px;
  height:5px;
  margin:5px 0px;
  cursor:pointer;
  transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
  top:10px;
  transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
  opacity:0;
}
#toggle-btn.active span:nth-child(3) {
  top:-10px;
  transform:rotate(-45deg);
}