title: Some doubts related to the absolute positioning of a div into a relative element
body: <p>I am following a tutorial about to the creation of a web template tabless using HTML+CSS and I have some doubts related to the positioning of elements inside my template.</p>
  
  <p>This image represents how my template have to look at the end:</p>
  
  <p><img src="https://i.stack.imgur.com/6R17N.jpg" alt="enter image description here"></p>
  
  <p>Now I have to place the horizontal main menu (the green one that is into the header)</p>
  
  <p>The tutorial that I am following say that I have to use the <strong>absolute positioning</strong> to move right the div having id=nav which contains the list with the navigation menu.</p>
  
  <p>To do this thig the tutorial say that I have to do the following thing:</p>
  
  <ol>
  <li>Set the position of its parent div as <strong>relative</strong> and set the exact height of this parent div</li>
  <li>Use the <strong>absolute positioning</strong> for the div having id=nav</li>
  </ol>
  
  <p>So, in my template I must have something like this in the HTML code:</p>
  
  <pre><code>        &lt;div id="header"&gt;    &lt;!-- HEADER --&gt;
              &lt;div id="logo"&gt;     &lt;!-- My Logo --&gt;
                  &lt;h1&gt;&lt;a href="#"&gt;My web site is cool&lt;/a&gt;&lt;/h1&gt;
                  &lt;p id="slogan"&gt;
                      My web site is finally online
                  &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;!-- Here go the horizontal main menu --&gt;
              &lt;div id="nav"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Portfolio&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Blog&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Contatti&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And something like this for the CSS code:</p>
  
  <pre><code>#header {
      background: #092F85;
      position: relative;
      height: 193px;          /* I set the height of my header */
  }   
  
  
  #nav{
      background: #93D459;
      position: absolute;
      top: 166px;
      right: 0;
  }
  </code></pre>
  
  <p>I think that the meaning of the <strong>positioning of the #nav div is easy</strong> (correct me if I'm wrong) and is: the div having id=nav is positioned in absolutely way in the right side (becasue <strong>right: 0;</strong>) of its container and thisdiv is pushed downward by 166px.</p>
  
  <p>Is this reasoning correct?</p>
  
  <p>the thing that I can't understand is: <strong>Why in the parent div (the #header) have I to set the position as relative?</strong></p>
  
  <p>I think that, generally, when I have to place an element with <strong>position: absolute;</strong> I have to set that it's parent have to be <strong>position: relative;</strong></p>
  
  <p>But why? What it means?</p>
  
  <p>Tnx</p>
  
  <p>Andrea</p>