Why does footer hide behind other elements when minimizing page

Community
1 
<!DOCTYPE html>
<html>
<style>
* {
    box-sizing: border-box;
}
body{
   margin: 0px;
   padding: 0px;
}
  .image.main
 {
    
    width:100%;
    height:100%;
    position: fixed;
    top:95px;
    z-index:-1;
    text-align: center;
 }

 .image.main img 
 {
   height:505px;
   opacity: 0.8;
   z-index:-1;
 }

 .mom
{
   
   width: 330px;
   max-height: 460px;
   float: right;
   overflow:auto;
   text-align:center;
   color: white;
}
 .mom1
{
   
   width: 330px;
   max-height: 460px;
   float: left;
   overflow:auto;
   text-align:center;
   color: white;
}

.container1
{
  background-color:gray;
  margin-right:5px;
  margin-left:10px;  
}
.container2
{
  margin-right:5px;
  margin-left:10px;
  background-color:gray;
}
.container3
{
  margin-right:5px;
  margin-left:10px;
  background-color:gray;
}
.container4
{
  margin-right:5px;
  margin-left:10px;
  background-color:gray;
}
.container5
{
  margin-right:5px;
  margin-left:10px;
  background-color:gray;
}

.containerLeft1
{
  background-color:gray;
  margin-left:5px;
  margin-right:10px;  
}
.containerLeft2
{
  margin-left:5px;
  margin-right:10px;
  background-color:gray;
}
.containerLeft3
{
  margin-left:5px;
  margin-right:10px;
  background-color:gray;
}
.containerLeft4
{
  margin-left:5px;
  margin-right:10px;
  background-color:gray;
}
.containerLeft5
{
  margin-left:5px;
  margin-right:10px;
  background-color:gray;

}
.shapes
 {
   text-align: center;
 } 
 header, footer{
   background-color:#982202;
   color: white;
   height:38px;
 }
 footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index:-1;
 }

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

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: coral;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>

<head>
  <title>Jared Gilmore is Lovely</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="About Jared Gilmore">
  <meta name="keywords" content="Jared Gilmore, teenage, actor, talented, modern, comedy">
  <meta name="author" content="Meghedi Mirbekian">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
<header>
<h1>Jared Gilmore</h1>
</header>

<div class="shapes">
<pre>&hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts;     &#9824;     &hearts; 
</pre>
</div>
<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="right"><a href="#about">About</a></li>
</ul>
<div class="image main">  
<picture>
  <source media="(min-width: 650px)" srcset="..\images\DciZZIsXkAA1bYw.jpg">
  <source media="(min-width: 465px)" srcset="..\images\DcibzHLXkAA-vgV.jpg">
  <img src="..\images\gg.jpg" alt="Flowers" style="width:auto;">
</picture>
</div>

<div class="mom"> 
<div class="container1">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container2">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container3">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container4">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="container5">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
</div>

<div class="mom1">
<div class="containerLeft1">
</div>
<div class="containerLeft2">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="containerLeft3">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
<div class="containerLeft4">
<iframe class="iframe"  width="280" height="150" src="https://www.youtube.com/embed/W1A2mXbmxuM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="containerLeft5">
<h2>About Jared Gilmore</h2>
<h4>Personal life</h4>
<h4>Carrier Life</h4>
</div>
</div>

<footer>
this is my footer
</footer>

</body>
</html>
2

since i couldn’t delete this post because of my stupid mistake, I solve it myself.

So I mistakenly put "z-index: -1"for footer.
That’s why it falls behind
Thanks u