HTML/CSS image on top of an image with a finxed nav bar
<p>I have a fixed navigation bar and an image on my webpage. I want to add another image on top of this image, but when I use "position: relative" and position:absolute", and I scroll, the 2 images go over my navigation bar. </p>

<p>Can anyone help? </p>

<p>I can post code if needed.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>(menueBar.css)
#menu-bar {
   font-family: Arial; 
   font-size: 20px; 
 }

#name {
 color: #ccc;
 margin-left: 15px;
 margin-top: 15px;
}

#nav{ background-color: #222;
      position: fixed; 
      width: 100%; 
      height: 133px;
      top: 0;
      left: 0; 
    }

#nav-wrapper{ width: 600px;
           margin: 0px 0 0 50px; 
           text-align:left; 
         }

#nav ul{ list-style-type: none; 
   padding: 0 0 0 0; 
  
  }

#nav ul li{ display: inline-block; }

#nav ul li:hover{ background-color: #333; }

#nav ul li a{ color: #CCC; 
      display: block;
        padding: 15px ; 
     text-decoration: none; 
    }



------------------------------------------------------------------------------
(main.css)


body {
 font-family:arial;
} 

h1,h2{
 margin-top: 0px;
 color:blue;
 
}

p {
 background: #666;
 color: white;
 padding : 10px;
}

#header-footer {
 margin:  66px 0 0 0;
 
}




  </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>----------------------------------------------
(index.html)

&lt;!doctype html&gt;
&lt;html&gt;

 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;
 &lt;head&gt;
  &lt;link href="styles/main.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="styles/menuBar.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;My WebPage&lt;/title&gt;
 &lt;/head&gt;

 &lt;div id="menu-bar"&gt;
 &lt;body&gt;
  &lt;div id="nav"&gt;
       &lt;div id="nav-wrapper"&gt;
          &lt;div id="name" &gt;
        &lt;p1 style="font-size:40px"&gt;Manish Saraf&lt;/p1&gt;
       &lt;/div&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;&lt;u&gt;Home&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="page2.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="page3.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="page4.html"&gt;Contact me&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
       &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
 &lt;/div&gt;

 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt; 

 &lt;!--Header-footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;
 &lt;div id ="header-footer" &gt;
  &lt;img src="images/header-footer.jpg" id="header-footer" style="width:100%;height:100%;"&gt;
  &lt;img src="images/me.jpg" id="me" style="width:100px; height:100px; "&gt;
 &lt;/div&gt;
 &lt;!--header-footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;


  &lt;h1&gt;My Website&lt;/h1&gt;
  &lt;h2&gt;This is my homepage&lt;/h2&gt;
  &lt;p&gt;And all my homepage Content&lt;/p&gt;

&lt;/html&gt;
--------------------------------------------------

(page2.html)(resume)
&lt;!doctype html&gt;
&lt;html&gt;

 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;

 &lt;head&gt;
  &lt;link href="styles/main.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="styles/menuBar.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;Resume&lt;/title&gt;
 &lt;/head&gt;

 &lt;div id="menu-bar"&gt;
 &lt;body&gt;
  &lt;div id="nav"&gt;
      &lt;div id="nav-wrapper"&gt;
          &lt;div id="name" &gt;
        &lt;p1 style="font-size:40px"&gt;Manish Saraf&lt;/p1&gt;
       &lt;/div&gt;
           &lt;ul&gt;
                 &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="page2.html"&gt;&lt;u&gt;Resume&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="page3.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="page4.html"&gt;Contact me&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
 &lt;/div&gt;
 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;

  &lt;h1&gt;Page 2&lt;/h1&gt;
  &lt;h2&gt;This is my page 2&lt;/h2&gt;
  &lt;p&gt;And all my page 2 Content&lt;/p&gt;

 &lt;/body&gt;

&lt;/html&gt;
---------------------------------------------------------------
(page3.html)(projects)
&lt;!doctype html&gt;
&lt;html&gt;

 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;

 &lt;head&gt;
  &lt;link href="styles/main.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="styles/menuBar.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;Projects&lt;/title&gt;
 &lt;/head&gt;

 &lt;div id="menu-bar"&gt;
 &lt;body&gt;
  &lt;div id="nav"&gt;
      &lt;div id="nav-wrapper"&gt;
          &lt;div id="name" &gt;
        &lt;p1 style="font-size:40px"&gt;Manish Saraf&lt;/p1&gt;
       &lt;/div&gt;
           &lt;ul&gt;
                 &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="page2.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="page3.html"&gt;&lt;u&gt;Projects&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="page4.html"&gt;Contact me&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
 &lt;/div&gt;
 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;





  &lt;h1&gt;Page 3&lt;/h1&gt;
  &lt;h2&gt;This is my page 3&lt;/h2&gt;
  &lt;p&gt;And all my page 3 Content&lt;/p&gt;

 &lt;/body&gt;

&lt;/html&gt;
----------------------------------------------------------------------------
(page4.html)(contact me)
&lt;!doctype html&gt;
&lt;html&gt;

 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;

 &lt;head&gt;
  &lt;link href="styles/main.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="styles/menuBar.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;Contact Me&lt;/title&gt;
 &lt;/head&gt;

 &lt;div id="menu-bar"&gt;
 &lt;body&gt;
  &lt;div id="nav"&gt;
      &lt;div id="nav-wrapper"&gt;
          &lt;div id="name" &gt;
        &lt;p1 style="font-size:40px"&gt;Manish Saraf&lt;/p1&gt;
       &lt;/div&gt;
           &lt;ul&gt;
                 &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="page2.html"&gt;Resume&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="page3.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="page4.html"&gt;&lt;u&gt;Contact me&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
 &lt;/div&gt;
 &lt;!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --&gt;

  &lt;h1&gt;Page 4&lt;/h1&gt;
  &lt;h2&gt;This is my page 4&lt;/h2&gt;
  &lt;p&gt;And all my page 4 Content&lt;/p&gt;

 &lt;/body&gt;

&lt;/html&gt;
---------------------------------------------------------------------------------</code></pre>
</div>
</div>
</p>