Html's button tag is hiding behind another button tag-CodePudding

I am making a simple Menu function with some animations which works fine but its hiding behind another button element . The code blocks are given below.

Note: this whole site is made on an Android phone and this is not tested on Desktop or laptop.

Html ——— CODE

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
  <title>Checking</title>
</head>
<body>
    <button onclick="MENUOPEN();" id="MENU" >MENU</button>
<br />
<input value="COMPANY->NAME" readonly="true" id="CNAME"></input>
<br />
<br />

    <button id="para">HELLO A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of three or more sentences. Though not required by the syntax of any language, paragraphs</button>
    
    <p style="visibility:hidden;"   id="MENUOPENED"  ><a href="#para">ABOUT-US</a> <br /> CONTACT-US</p>
    
</body>
</html>

JavaScript ——— CODE

// OPENING MENU

function MENUOPEN(){
 var btn=document.getElementById('MENU');
 var openbtn=document.getElementById('MENUOPENED');
 openbtn.style="box-shadow:5px 3px 5px; animation:right ease 2s;"
 btn.innerHTML="CLOSE";
 btn.style="width:27%;";
 btn.setAttribute("onclick","MENUCLOSE();")
}
//CLOSING MENU
function MENUCLOSE(){
 var btn=document.getElementById('MENU');
 var openbtn=document.getElementById('MENUOPENED');
 openbtn.style="animation:left ease 2s;box-shadow:5px 3px 5px;left:400px;opacity:.0;"
 btn.innerHTML="MENU";
 btn.style="width:27%;";
 btn.setAttribute("onclick","MENUOPEN();")
}

Css ——— CODE

body{
font-family: 'DynaPuff', cursive;
}
.BTN{
box-shadow:5px 3px 5px;
 border-radius:20px;
font-size:26px;
font-family: 'DynaPuff', cursive;
background-color:white; 
}
#MENU{
 position:fixed;
box-shadow:5px 3px 5px;
 border-radius:20px;
width:25%;
font-size:26px;
font-family: 'DynaPuff', cursive;


}
#CNAME{
box-shadow:5px 3px 5px;
font-family: 'DynaPuff', cursive;
 padding-left:2px;
 border-radius:20px;
 position:fixed;
 width:63%;
 left:32%;
 top:1.5%;
 font-size:26px;
}
#para{
 position:absolute;
 top:10%;
 left:2.5%;
 width:95%;
 
 
}

@keyframes left {
   0% {
      opacity: 1;
     
   }
   100% {
    
      transform: translatex(-100%);
      opacity: 0;
      
   }
} 
@keyframes right {
   0% {
      opacity: 0;
     
      transform: translateX(90%);
   }
   100% {
      opacity: 1;
     
   }
}

Can anybody solve this problem .

CodePudding user response：

Just add z-index:-1 to #para

// OPENING MENU

function MENUOPEN(){
 var btn=document.getElementById('MENU');
 var openbtn=document.getElementById('MENUOPENED');
 openbtn.style="box-shadow:5px 3px 5px; animation:right ease 2s;"
 btn.innerHTML="CLOSE";
 btn.style="width:27%;";
 btn.setAttribute("onclick","MENUCLOSE();")
}
//CLOSING MENU
function MENUCLOSE(){
 var btn=document.getElementById('MENU');
 var openbtn=document.getElementById('MENUOPENED');
 openbtn.style="animation:left ease 2s;box-shadow:5px 3px 5px;left:400px;opacity:.0;"
 btn.innerHTML="MENU";
 btn.style="width:27%;";
 btn.setAttribute("onclick","MENUOPEN();")
}

ody{
font-family: 'DynaPuff', cursive;
}
.BTN{
box-shadow:5px 3px 5px;
 border-radius:20px;
font-size:26px;
font-family: 'DynaPuff', cursive;
}
#MENU{
 position:fixed;
box-shadow:5px 3px 5px;
 border-radius:20px;
width:25%;
font-size:26px;
font-family: 'DynaPuff', cursive;


}
#CNAME{
box-shadow:5px 3px 5px;
font-family: 'DynaPuff', cursive;
 padding-left:2px;
 border-radius:20px;
 position:fixed;
 width:63%;
 left:32%;
 top:1.5%;
 font-size:26px;
}
#para{
 position:absolute;
 top:10%;
 left:2.5%;
 width:95%;
 z-index: -1; /*this is the new code*/
 
}

@keyframes left {
   0% {
      opacity: 1;
     
   }
   100% {
    
      transform: translatex(-100%);
      opacity: 0;
      
   }
} 
@keyframes right {
   0% {
      opacity: 0;
     
      transform: translateX(90%);
   }
   100% {
      opacity: 1;
     
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
  <title>Checking</title>
</head>
<body>
    <button onclick="MENUOPEN();" id="MENU" >MENU</button>
<br />
<input value="COMPANY->NAME" readonly="true" id="CNAME"></input>
<br />
<br />

    <button id="para">HELLO A paragraph is a self-contained unit of discourse in writing dealing with a particular point or idea. A paragraph consists of three or more sentences. Though not required by the syntax of any language, paragraphs</button>
    
    <button style="visibility:hidden;"   id="MENUOPENED"  ><a href="#para">ABOUT-US</a> <br /> CONTACT-US</button>
    
</body>
</html>

CodePudding user response：

Have you tried varying uses of Z-index?