title: How can position relative make a dom node paint over a position fixed one?
body: <p>I was building a modal, and I was having problems keeping the background behind the main content.
  They were on the correct hierarchy for them being painted correctly: the ones behind comes first.
  The problem was that the absolute position background was &quot;hidding&quot; the content, despite the content should be painted after and therefore in front.</p>
  <p>Suddenly I realised that adding position relative to the content make it render on top of the background, so the background-color of the background was not &quot;masking&quot; it anymore.</p>
  <p>Here is a fiddle where you can see how the content with the  position absolute has the correct colors, while the one with normal position has it's colors tinted red.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(100, 0, 0, 0.55);
  }
  
  .content {
    background-color: lightblue;
    padding: 1rem;
    position: relative;
  }
  
  .norelative {
    background-color: lightblue;
    padding: 1rem
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  Just some basic text
  &lt;/div&gt;
  &lt;div class="main"&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;div class="norelative"&gt;No relative&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/danielo515/x3u2Lth7/11/" rel="nofollow noreferrer">https://jsfiddle.net/danielo515/x3u2Lth7/11/</a></p>
  <p>How is this possible? How can position relative affect this layering problem?</p>