title: How can I get the containing block of a "fixed" positioned element with javascript?
body: <p>Let's say we have the following setup:</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>#header {
      background-color: #ddd;
      padding: 2rem;
  }
  #containing-block {
      background-color: #eef;
      padding: 2rem;
      height: 70px;
      transform: translate(0, 0);
  }
  #button {
      position: fixed;
      top: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;header&lt;/div&gt;
  &lt;div id="containing-block"&gt;
      containing-block
      &lt;div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;button id="button" onclick="console.log('offsetParent', this.offsetParent)"&gt;click me&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>where the button has <code>fixed</code> position and the containing-block has a <code>transform</code> property in place.</p>
  
  <p>This might come as a surprise, but the button is positioned relative to the <code>#containing-block</code>, not the viewport (as one would expect when using <code>fixed</code>). That's because the <code>#containing-block</code> element has the <code>transform</code> property set. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed</a> for clarification.</p>
  
  <p>Is there an easy way to find out which is the containing block of the button? Which is the element <code>top: 50px</code> is calculated in respect to? Assume you don't have a reference to the containing block and you don't know how many levels up it is. It may even be the documentElement if there are no ancestors with <code>transform</code>, <code>perspective</code> or <code>filter</code> properties set.</p>
  
  <p>For <code>absolute</code> or <code>relative</code> positioned elements, we have <code>elem.offsetParent</code> which gives us this reference. However, it is set to null for <code>fixed</code> elements.</p>
  
  <p>Of course, I could look up the dom and find the first element that has a style property of <code>transform</code>, <code>perspective</code> or <code>filter</code> set, but this seems hacky and not future proof.</p>
  
  <p>Thanks!</p>