title: HTML/CSS Make header and nav sticky on top of the page
body: <p>Currently working on a web project, I would like to set up a sticky part on my website
  that could be always available. I tried different things but nothing worked.</p>
  
  <p>My structure is like below</p>
  
  <pre><code>&lt;body&gt;
    &lt;wrap&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;nav&gt;&lt;/nav&gt;
      &lt;container&gt;&lt;/container&gt;
    &lt;/wrap&gt;
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>If you prefer a scheme, it's this link:
  <a href="http://s21.postimg.org/79tp8wu5z/structure_page.png" rel="nofollow">http://s21.postimg.org/79tp8wu5z/structure_page.png</a></p>
  
  <p>So I want to make my header nav and background (which is applied on body background) sticky on top of the page.</p>
  
  <p>I know I need to use the fixed an relative position but nothing works except the background.</p>
  
  <p>Here is my css:</p>
  
  <pre><code>body {
    background: url(img/bg.jpg) no-repeat center center;
    background-attachment: fixed;
    background-position: top;
  }
  
  .wrap {
    width: 960px;
    margin: 0 auto;
  }
  
  #header {
    height: 121px;
    position: relative;
  }
  
  #footer {
    height: 40px;
    background-color: #146992;
    position: relative;
  }
  
  .container {
    position:relative;
  }
  
  #menu {
    position:relative;
    height: 45px;
  }
  </code></pre>
  
  <p>Thanks for your help.</p>