title: What conditions will bound a position: fixed element to its parent's box?
body: <p>I'm trying to make a backdrop for a menu that will be used to detect if the user has clicked somewhere other than on the menu and close the menu.</p>
  
  <p>For some reason despite setting</p>
  
  <pre><code>.menu-backdrop {
     position: fixed;
     left: 0px;
     right: 0px;
     top: 0px;
     bottom: 0px;
  }
  </code></pre>
  
  <p>The backdrop won't stretch beyond one of the parent divs.</p>
  
  <p>I've distilled the webpage to something simple and stuck it here <a href="http://codepen.io/ben_irule/pen/LZWwjL?editors=1100" rel="nofollow">http://codepen.io/ben_irule/pen/LZWwjL?editors=1100</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      .app-layout {
          height: 100%;
      }
  
      .layout {
          height: calc(100% - 35px);
          display: block;
      }
  
      footer {
          height: 35px;
          background-color: green;
      }
  
      .content {
          position: relative;
  
          /* attribute of doom*/
          transform: translate3D(0, 0, 0);
  
          display: block;
          height: 100%;
          margin-left: 320px;
          margin-right: 280px;
      }
  
      .menu-backdrop {
          position: fixed;
          left: 0px;
          right: 0px;
          top: 0px;
          bottom: 0px;
          background-color: blue;
      }
  
      html, body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
      }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div  class="app-layout"&gt;
      &lt;div class="layout"&gt;
          &lt;div class="content"&gt;
              &lt;div class="menu-backdrop"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've noted one transform attribute that when disabled stops the parent div from being problematic.  However when I disable the equivalent attribute in the full blown app it does not resolve the issue.</p>
  
  <p><strong>I'm interested in understanding what conditions will result in a fixed position element being bound by a parent div.</strong></p>
  
  <p>I've been searching the web all morning but haven't found anything resembling my current issue.</p>