title: Why would position: fixed not take an element out of flow?
body: <p><strong>Is there any common occurrences of why: <code>position:fixed</code> wouldn't take an element out of flow?</strong>  I've never seen this before typically fixed always applies the element to the window.</p>
  
  <p>I have a large applications from which I've applied <code>position:fixed</code> to a nested element.  The element is nested because scoped variables. I would link some html and css but nothing seems out of the ordinary? so I really don't know what to display.</p>
  
  <p><em>scopeing?</em> I'm using angular/ui-router and I need the proper controller variables. </p>
  
  <p><strong>Main.html:</strong>
  <em>This way works when i bring the inner-weekly-categories div out side of ad-container but it messes up my scoping</em></p>
  
  <pre><code>&lt;div class="inner-weekly-categories-header group"&gt;
    &lt;div class="c8-xs c8-sm c8-md product-title"&gt;
      &lt;h2&gt;all products&lt;/h2&gt;
      &lt;p&gt;results &lt;span&gt;1-{{limitTotal}}&lt;/span&gt; of &lt;span&gt;{{categoryProducts.length}}&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="c8-xs c8-sm c8-md category-filter"&gt;
      &lt;input type="text" ng-model="dropdownSelected"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="ad-container" ui-view="weekly"&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ad-container {
      z-index: 5;
      height: 100%;
      position: relative;
      overflow: hidden;   
  }
  inner-weekly-categories-header {
      color: #969696;
      background: white;
      border-bottom: 1px solid #e7e5e3;
      font-family: 'HelveticaNeueLTCom-Roman', Helvetica, Arial, sans-serif;
      position: fixed;
      z-index: 10;
      top: 70px;
      left: 10%;
      width: 80%;
      margin: 0 auto;
      padding: 8px 0;
  }
  </code></pre>
  
  <p><strong>The ui-view='weekly' does an xhr request to place</strong> <code>inner-weeklytegories-header</code> inside of it.</p>