How can I position my mobile menu over the content?

If I reduce my device's width to mobile menu I can't get my menu over my content and because of this the menu becomes unclickable. Z-index did not work for me.

Could you help me, please?

And the code:

html:

<html>
<head>
</head>
<body>
<div class="bg">
<ul class="topnav" id="myTopnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>

CSS:

html, body {
    padding: 0;
    margin: 0;

}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: navbar;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
.bg {
margin: 0;
padding: 0;
background: lightgrey;
position: relative;
height: 500px;
}
.div1
{
background: red;
width: 100px;
position: absolute;
margin: 0 auto;
height: 100px;
bottom: 0;
top: 100px;
left: 0;
right: 0;
}

.div2{
background: green;
width: 100px;
max-width: 100px;
position: absolute;
margin: 0 auto;
height: 100px;
bottom: 0;
top: 300px;
left: 0;
right: 0;
}

JS:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Thank you very much!

Solution

The z-index needs to be applied to ul.topnav and that will fix your issue.

ul.topnav {
  z-index: 99;
}

Working example:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html,
body {
  padding: 0;
  margin: 0;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: navbar;
  z-index: 99;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {
  background-color: #555;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) {
  ul.topnav li {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.bg {
  margin: 0;
  padding: 0;
  background: lightgrey;
  position: relative;
  height: 500px;
}

.div1 {
  background: red;
  width: 100px;
  position: absolute;
  margin: 0 auto;
  height: 100px;
  bottom: 0;
  top: 100px;
  left: 0;
  right: 0;
}

.div2 {
  background: green;
  width: 100px;
  max-width: 100px;
  position: absolute;
  margin: 0 auto;
  height: 100px;
  bottom: 0;
  top: 300px;
  left: 0;
  right: 0;
}

<div class="bg">
  <ul class="topnav" id="myTopnav">
    <li><a href="/">Home</a></li>
    <li><a href="/">News</a></li>
    <li><a href="/">Contact</a></li>
    <li><a href="/">About</a></li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
    </li>
  </ul>

  <div class="div1">
  </div>
  <div class="div2">
  </div>
</div>