title: Is it possible to use position relative more than once in the same html page?
body: <p>I am using 'position relative' and 'position absolute' on my master page.</p>
  
  <p>I have a page that use the above master page, And I am trying to use in this page the 'Position relative' and 'position absolute' again for 2 other elements, but the element below ('position absolute') in this page is not placed according to the element above his ('position relative') and instead it refers to the 'position relative' of the element in the master page..</p>
  
  <p>Hope is was not too clumsy explanation..</p>
  
  <p>Is it possible to use 'position relative' more than once on the same HTML page??? If so, how??</p>
  
  <p>html codes
      </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="basic.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="one"&gt;&lt;/div&gt;
  &lt;div class="two"&gt;&lt;/div&gt;
  &lt;div class="three"&gt;&lt;/div&gt;
  &lt;div class="four"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css codes
              body{
        margin: 0px;
          padding: 0px;
        }</p>
  
  <pre><code>.one{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
  }
  
  .two{
      width: 200px;
      height: 200px;
      background: green;
      position: absolute;
      top: 0px;
      left: 200px;
  }
  
  .three{
      width: 200px;
      height: 200px;
      background: blue;
      position: relative;
  }
  
  .four{
      width: 200px;
      height: 200px;
      background: black;
      position: absolute;
      top: 0px;
      left: 200px;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/FtIHl" rel="nofollow noreferrer">codepen link</a></p>