title: Position fixed - not breaking out of document flow
body: <p>Im pretty good with my css and i'd like to think i can figure why most things do what they do when it comes to frontend development. But i came across an issue today that I don't fully understand.</p>
  
  <p>Heres the code:</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>.nav-toggle {
    position: absolute;
    transform: translateY(50%);
  }
  
  .nav-open .nav-toggle:after {
    background: rgba(0, 0, 0, 0.5);
    content: '';
    display: block;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span data-action="toggle-nav" class="action nav-toggle"&gt;
           &lt;span&gt;Menu&lt;/span&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a fiddle for it:</p>
  
  <p><a href="https://jsfiddle.net/0vm962be/1/" rel="nofollow noreferrer">https://jsfiddle.net/0vm962be/1/</a></p>
  
  <p>And here is the second fiddle with the transform commented out.</p>
  
  <p><a href="https://jsfiddle.net/0vm962be/2/" rel="nofollow noreferrer">https://jsfiddle.net/0vm962be/2/</a></p>
  
  <p>So you'll see the difference. </p>
  
  <p>So, what i would expect to happen is the after would be 100% width of the body and 100% height of the body, when the parent element has a <strong>.nav-open</strong> class. </p>
  
  <p>However because of 1 simple line of code (transform: translateY(50%)), this doesn't happen, what actually happens is the <strong>fixed</strong> element acts like a absolutely positioned element inside of the .nav-toggle and only goes 100% to its parent.</p>
  
  <p>why would a transform on a parent have an impact of a fixed element? I though <strong><em>position: fixed;</em></strong> broke the document flow no matter what. And only listened to the window width height. I need to learn why this happened.</p>
  
  <p>Any advice would be great. Links to specs etc? </p>