How to prevent text from overlapping nav bar?

Question

My top navigation bar is getting overlapped by the text below when scrolling up. I have tried giving those textboxes z-index:2; and nav z-index:1; but that didn't fix it. Could some one please help?

<div id = "container">
  <div class="header" id="myHeader">
    <!--  <h2>My HeaderXXX</h2> -->
    <nav>
      <ul>
      <li><img src="img/nara.png" class="logo" alt="Nara logo"></li>
      <li><a class = "active" href = "">Home</a></li>
      <li><a href = "district.html">District</a></li>
      <li><a href = "resort.html">Resort</a></li>
      </ul>
    </nav>
  </div>

  <!--  Main picture  -->
    <div>
    <div class="banner-text">Welcome to Nara legend theme park</div>
    <div class="banner-sub-text">Experience authentic Japanese ancient culture</div>
    <img src="img/resort-00.jpg" style="width:100%">
  </div>  

  <!--  Script  -->
  <script>
    window.onscroll = function() {myFunction()};

    var header = document.getElementById("myHeader");
    var sticky = header.offsetTop;

    function myFunction() {
    if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  }
  </script>      
</div>

This is the CSS:

body 
{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: rgb(260, 250, 240, 0.5)
}

.header 
{
  /*padding: 10px 16px;*/
  /*background-color : rgb(85, 85, 85);*/
  padding: 10px 10px; 
  background: rgb(51, 51, 51);
  color: #f1f1f1;
}

h2
{
  text-align: center;
}

h4
{
  text-align: center;
}

.content 
{
  padding: 16px;
}

.sticky 
{
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content 
{
  padding-top: 102px;
}

nav
{
  width : 100%;
  height : 50px;
  background-color : rgb(51, 51, 51); /* to match `header` color*/
  padding-top : 5px;/**/
  z-index:1;
}
nav ul
{
  list-style-type : none;
  margin : 0;
}
nav ul li
{
  float : left;
}
nav ul li a
{
  font-family : Arial;
  font-size : 24px;
  font-weight : bold;
  text-decoration : none;
  display : block;
  padding : 10px 12px 10px 12px;
  background-color : rgb(51, 51, 51);
  color : white;
}
nav ul li a:hover
{
  background-color : rgb(120, 120, 120);
}
nav .active
{
  background-color : rgb(100, 100, 100);
}

img 
{ 
  max-width: 100%;
}
img.logo
{ 
  width: 206px;
  height: 48px;
}

* {box-sizing:border-box}

/* Banner text */
.banner-text {
  display: flex;
  justify-content: center;
  color: #f2f2f2;
  font-size: 60px;
  padding: 150px 12px;
  position: absolute;
  top: 50;
}

.banner-sub-text {
  color: #f2f2f2;
  font-size: 20px;
  padding: 256px 12px;
  position: absolute;
  top: 50;
}

Answer 1

Try adding z-index: 2 to your .header class instead. Your nav and your text div are in different levels, so their z-index will not be compared and the z-index of your header (1) will be used instead.