title: Coordinate systems in HTML/CSS for different positioning schemes
body: <p>I've been studying HTML/CSS and, while reading the article <a href="https://alistapart.com/article/css-positioning-101" rel="nofollow noreferrer">CSS Positioning 101</a>, I came upon this statement:</p>
  
  <blockquote>
    <p>a static element can’t even create a new coordinate system for child
    elements</p>
  </blockquote>
  
  <p>Then the author also states:</p>
  
  <blockquote>
    <p>Creating a coordinate system for child elements is another one of the
    relative positioning property’s super powers</p>
  </blockquote>
  
  <p>Ok. That's relatively simple to understand, I thought. So I made some predictions and wanted to test them to be sure I got it right.</p>
  
  <p>At that same page, the author provide some examples, so I altered them a little bit. <a href="https://alistapart.com/d/css-positioning-101/example_d.html" rel="nofollow noreferrer">Example D</a> was altered as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Example D&lt;/title&gt;
    &lt;style&gt;
      #box_1 {
        position: static;
        width: 200px;
        height: 200px;
        background: #ee3e64;
      }
      
      .box_2 { /*made it into a class*/
        position: relative;
        left: 200px;
        width: 200px;
        height: 200px;
        background: #44accf;
      }
      
      #box_3 {
        position: static;
        width: 200px;
        height: 200px;
        background: #b7d84b;
      }
    &lt;/style&gt;
    &lt;meta id="dcngeagmmhegagicpcmpinaoklddcgon"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="box_1"&gt;
      &lt;div class="box_2"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="box_3"&gt;
      &lt;div class="box_2"&gt;&lt;/div&gt;
      &lt;!-- created a new box_2 inside box_3 --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For me the result was unexpected.</p>
  
  <p><a href="https://i.stack.imgur.com/YE4k0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YE4k0.png" alt="enter image description here"></a></p>
  
  <p>I predicted, since box_3 is a static element (and therefore establishes no new coordinate system), the box_2 inside it should be exactly at the same place as the first box_2, as both of them would use the document's coordinate system as a reference. Instead, the second box_2 was shifted 200px as if the static element box_3 had indeed created a new coordinate system for its children, counter to what the author stated.</p>
  
  <p>So I got very confused. I also made some tests with absolute-positioned elements and the results also didn't make much sense to me.</p>
  
  <p>Did I just get all wrong or is this article and are these statements simply false? If I got it wrong, what does the author mean by "create a new coordinate system"?</p>
  
  <p>Thanks for the help!</p>