title: Difference between CSS Positioning and CSS Margin
body: <p>Today I was learning 2 concepts in CSS, one is CSS positioning (static, relative, absolute, fixed) and the other is CSS Margin, which define the space between element.</p>
  
  <p>Let's say I wanted to move an element, which is the best way of doing it?Since both concept seems to be able to do the same thing. An example might be as follow:</p>
  
  <h3><b>The Code(CSS Positioning):</b></h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Haha&lt;/title&gt;
  
          &lt;style type="text/css"&gt;
              //Using CSS positioning
              h2{position:relative;top:-80px}
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1&gt;hahahaha&lt;/h1&gt;
          &lt;h2&gt;hehehehe&lt;/h2&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3><b>The Code(CSS Margin):</b></h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Haha&lt;/title&gt;
  
          &lt;style type="text/css"&gt;
              //Using CSS Margin
              h2{margin-top:-80px}
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1&gt;hahahaha&lt;/h1&gt;
          &lt;h2&gt;hehehehe&lt;/h2&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3><b>The Question:</b></h3>
  
  <p>1.)As you can see the 2 codes above did the same thing by moving the second header to the top of the first header. So I just wonder which method is actually the correct way in arranging element?</p>