title: CSS Absolute Position Div vs P
body: <p>I ran into an issue with absolute position with a nested <code>p</code> tag.  <a href="http://jsfiddle.net/8rGTL/1/" rel="nofollow noreferrer">This JSFiddle</a> demonstrates the difference.  Based on the description on <a href="https://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute">this question</a> and the comment by user1334007 absolute positioning is relative to the first parent.  Even though <a href="http://www.w3schools.com/css/css_positioning.asp" rel="nofollow noreferrer">w3schools</a> does not state that, it appears to be the case for <code>div</code> tags.  For <code>p</code> tags, it seems that absolute is relative to the page as Michael Zaporozhets states in the SO answer and w3school describes.</p>
  
  <p><strong>With all these links in mind, am I making a mistake with my styles somewhere or are these performing differently?  If they perform differently, can someone offer an explanation as to why this happens please?</strong>  The main reason I am asking is this is a question in the 70-480 certification tests and even though I know the answer the say is correct, I would like to be able to use positioning with confidence going forward.</p>
  
  <p>Code in <a href="http://jsfiddle.net/8rGTL/1/" rel="nofollow noreferrer">jsFiddle</a> link (required to have code to submit jsfiddle link so i just put it all in)</p>
  
  <pre><code>&lt;h2&gt;Paragraph Position&lt;/h2&gt;
  &lt;p class="outer"&gt;Hello Outer
      &lt;p class="inner"&gt;Hello Inner&lt;/p&gt;
  &lt;/p&gt;
  &lt;br/&gt;
  
  &lt;h2&gt;Division Position&lt;/h2&gt;
  &lt;div class="outer"&gt;Hello Outer
      &lt;div class="inner"&gt;Hello Inner&lt;/div&gt;
  &lt;/div&gt;
  
  .outer {
      position: relative;
      background-color: red;
      height: 100px;
      width: 500px;
  }
  
  .inner {
  
      position: absolute;
      top: 15px;
      left: 15px;
      background-color: green;
  }
  </code></pre>