title: What happens when nesting elements with position: fixed inside each other?
body: <p>Okay, I've noticed something, but couldn't find it in the CSS spec. Styling an element with <code>position: fixed</code> will position it absolutely, with respect to the browser viewport. What happens if you place a fixed-position element inside another?</p>
  <p>Example CSS along the lines of:</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>.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
  }
  
  #parent {
    right 100px;
    padding: 40px;
  }
  
  .fixed .fixed {
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent" class="fixed"&gt;
    &lt;div class="fixed"&gt; &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As far as I can tell, the element is fixed-positioned with respect to its nearest parent that's also fixed-positioned. Is this observable in all browsers; also, is it a bug, or intentional behaviour?</p>
  <p>So far I've not found anything on this topic, just 'fixed position makes it stick to the page'.</p>