title: how should position: fixed work in a shadow DOM root?
body: <p>I have a div with <code>position: fixed</code>, which hypothetically should attach to the bottom of the viewport and not scroll, at least according to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" rel="noreferrer">MDN</a>.</p>
  
  <p>Instead, what I get is a div that is stuck in its initial position (the bottom of the viewport when the page is rendered), but then scrolls up and down with the shadow-dom scroller.</p>
  
  <p>EDIT: </p>
  
  <p>Here's a codepen with the element inside the core-scaffold. Note that the red div in this pen has position: fixed as described in my code below.</p>
  
  <p><a href="http://codepen.io/ericeslinger/pen/bdedgp" rel="noreferrer">http://codepen.io/ericeslinger/pen/bdedgp</a></p>
  
  <p>Here's a codepen with the element outside the core-scaffold. This is the behavior I'd like to have, but with the div structurally inside the core-scaffold (for angular scoping reasons).</p>
  
  <p><a href="http://codepen.io/ericeslinger/pen/jPrPyy" rel="noreferrer">http://codepen.io/ericeslinger/pen/jPrPyy</a></p>
  
  <p>FWIW, I'm using polymer 0.5. Here's a sketch of what I'm running:</p>
  
  <pre><code>&lt;head&gt;
  &lt;style type="text/css"&gt;
  .testClass {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0px;
    right: 0px;
    height: 150px;
    background-color: red;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body unresolved&gt;
  &lt;core-scaffold&gt;
    &lt;div main vertical layout&gt;
      &lt;span&gt;woo&lt;/span&gt;
      &lt;div class="testClass"&gt;This is some stuff at the bottom&lt;/div&gt;
      &lt;div style="min-height: 2000px" flex&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/core-scaffold&gt;
  </code></pre>
  
  <p>If I move the testClass div outside of core-scaffold, it does the expected thing and sticks to the bottom of the window. If I keep it inside of core-scaffold, it doesn't.</p>