title: Why is my child element positioned to the body when its parent is positioned relative?
body: <blockquote>
  <p>My html is as follows:</p>
  </blockquote>
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;board&quot;&gt;
  &lt;div class=&quot;person&quot;&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <blockquote>
  <p>Now here is my css:</p>
  </blockquote>
  <pre><code>*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  #board{
  position:relative;
  height:500px;
  width:500px;
  background:yellow;
  top:5rem;
  left:8rem;
  
  }
  .person{
  position:absolute;
  top:34rem;
  left:20px;
  padding:1rem;
  background-color:blue;
  }
  </code></pre>
  <blockquote>
  <p>Now my question is why does the div with <code>.person</code> not positioned absolute to the div with <code>#board</code>? I feel like it should work since the parent element is positioned relative and then the child should position itself absolute to that parent element because of that. When I give <code>.person</code> div a crazy <code>top</code>, it still manages to break out of the parent div. Why is that? Thanks for any feedback.</p>
  </blockquote>