title: body {position: relative;}
body: <p>I'm looking to position my document with CSS, and I was wondering what the consensus is on setting the body element's position property to relative to establish the initial containing block. Is this considered bad practice? I've read that it isn't necessary, and that, say, if the body element's first child is absolutely positioned, it's containing block defaults to the HTML element, which is equivalent to the viewport. I'm confused because I can't seem to get the positioning to work without body {position: relative;}.</p>
  
  <p>Here is the HTML and CSS:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;link href="styles.css" type="text/css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="div1"&gt;
  
          &lt;p id="p1"&gt;
              content
          &lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;div id="div2"&gt;
  
          &lt;p id="p2"&gt;
              content
          &lt;/p&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  body{
      position: relative;
  }
  
  #div1 {
      position: absolute;
      top: 500px;
      width:auto;
      margin: auto;
  }
  
  #p1 {
      position: absolute;
      width: auto;
      background-color: aqua;
  }
  
  #div2 {
      position:absolute;
      top: 200px;
      background-color: red;
  }
  
  #p2 {
      position: absolute;
  }
  </code></pre>
  
  <p>I threw this example together so I can start messing with the different values for <code>position</code>, <code>margin</code>, and <code>width</code>. This is a lot different than what I originally posted. I was hoping to understand how to set the initial context for all of the other positioned elements in the document so that I can eventually understand how the browser calculates the auto value. I started to get confused by trying to automatically set widths and center elements on the page.</p>