Q:

Pic goes over the navbar when the user scroll down

I created  navbar ( had some help to do it ) that when the user scroll down the navbar will move with the page ( fixed position ) , but when i add a photo to the second section and when the i scrolled down the image goes over the navbar , i still dont know why !! i read that you need to add something like this ( z-index -100 ) , but i did not know whereto put it or if that will work , hope you guys help me .

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

var topNav = document.getElementById("topNav"),
  stop = topNav.offsetTop,
  docBody = document.documentElement || document.body.parentNode || document.body,
  hasOffset = window.pageYOffset !== undefined,
  scrollTop;

window.onscroll = function(e) {
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
  if (scrollTop >= stop) {
    topNav.className = 'sticky';
  } else {
    topNav.className = '';
  }
}

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},
.sticky {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 
/* fisrt section */ 
 
header {
   font-family: "Comic Sans MS", cursive, sans-serif;
 } 
 
header {
   background-image: url("pic19.jpg");
   color: white;
   text-align: left;
   width:auto;
   height:450px;
   padding-top: 50px;
 }
 
.L{
width:700px;
height:auto;
}
 
p.head{
    font-family: Impact, Charcoal, sans-serif;
    color: white;
    font-size:50px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 45px;
 }
 
 p.L1{
    font-family: Impact, Charcoal, sans-serif;
    color: white;
 font-size:20px;
 top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 60px;
 width:450px;
 
 }
 
 
img{
    position: absolute;
    right: 90px;
    top: 90px;
    width: 42%;
    height: auto;
 box-shadow: 0 0 20px rgba(0,0,0,0.4);
}


 
 
/* seconed section */  
 

 
.S2{
   position:static;
   background-image: url("pic16.jpg");
   width: auto;
   height:450px;
   float: center;
   padding: 10px;
   color:white;  
  }

h1{ 
   padding-bottom:0px;
   padding-top:50px;
   padding-left:70px;
   font-size:30px;   
 }
 
 
p.par{
   padding-bottom:0px;
   padding-top:3px;
   padding-left:100px;
   width:550px;
   font-size:20px;
   }
 
   
img.p2{

    top:660px;
    left:700px;
    right:25px;
    width: 42%;
    height: auto;
 
    }
  


#H2{
   background-image: url("pic16.jpg");
   color: white;
   text-align: left;
   height:450px;
   padding-top: 50px;
   width:auto;
   }
 


 
 

 
 
 
#footer {
   background-image: url("pic17.jpg");
   color: white;
   clear: both;
   text-align: center;
   padding: 100px;
 }


 
 /*   navabar */
 
 
 
 
 ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
 }
 
 li {
   float: left;
   border-right: 1px solid #bbb;
 }
 
 li.logo {
   border-right: none;
   font-family: Impact, Charcoal, sans-serif;
   color: white;
   font-size: 50px;
   margin-top: 5px;
   padding-left: 30px;
 }
 
 li:last-child {
   border-right: none;
 }
 
 li a {
   display: block;
   color: white;
   text-align: center;
   padding: 25px 30px;
   text-decoration: none;
   font-size: 15px;
 }
 
 li a:hover:not(.active) {
   background-color: #111;
 }
 
 .active {
   background-color: #4CAF50;
 }
<title>New Technology Planet</title>
<head>
   <link rel="stylesheet" href="home.css">
</head>
<body>
   <!-- Header of the page -->     
   <header>
      <section class="L">
         <p class="head">
            New Technology Planet
         </p>
         <p class="L1">
            We Hosts TeamSpeak 3 servers & websites <br><br>
            "Our Goal Is Presenting To You The Best Services That We Can Do And The Best Prices That You Will Find"<br><br>
            Teamspeak 3 is your new way to communicate with your friends and your employee 
         </p>
      </section>
      <div id="slideshow">
         <div>                      
            <img src="ts.png">
         </div>
         <div>       
            <img src="ts3.png">
         </div>
         <div>       
            <img src="ts4.png">
         </div>
      </div>
   </header>
   <!-- Header of the page >
      <!-- navagattor start code -->
   <nav role='navigation' id="topNav">
      <ul>
         <li class="logo">NewTecPlanet</li>
         <ul style="float:right;list-style-type:none;">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News|Updates</a></li>
            <li><a href="#contact">Products</a></li>
            <li><a href="#login">SignUp | Login</a></li>
            <li><a href="#about">About US</a></li>
            <li><a href="#about">Contact Us</a></li>
         </ul>
      </ul>
   </nav>
   <!-- navagattor end code -->
   <!-- second section or part1 start -->
   <div class="S2">
      <section class="L">
         <h1>What is TeamSpeak 3 ?</h1>
         <p class="par">TeamSpeak is proprietary voice-over-Internet Protocol (VoIP) software that allows computer users to speak on a chat channel with fellow computer users, much like a telephone conference call. A TeamSpeak user will often wear a headset with a microphone. Users use the TeamSpeak client software to connect to a TeamSpeak server of their choice, from there they can join chat channels.</p>
         <p class="par">The target audience for TeamSpeak is gamers, who can use the software to communicate with other players on the same team of a multiplayer game. Communicating by voice gives a competitive advantage by allowing players to keep their hands on the controls.</p>
      </section>
      <img class="p2" src="pic20.png">                       
   </div>
   <!-- second section or part1 end -->
   <!-- theird section -->
   <!-- the end of the third section >
      < !-- final part -->
   <div id="footer">
      New Technology Planet
   </div>
   <!-- final part end -->

A:

You can put the z-index for nav as follow:
nav {
z-index: 999;
}

Edit:
Use the following to fix the movement of content:
img.p2{
   padding-top: 50px;
   left: 700px;
   right: 25px;
   width: 42%;
   height: auto;
   position: static;
}
section.L{
   float: left;
}

