title: transform: translate3d makes fixed position element act as an absolute positioned one
body: <blockquote>
    <p>Relative question:
    <a href="https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children">&#39;transform3d&#39; not working with position: fixed children</a></p>
  </blockquote>
  
  <p>TL;DR:
  Here is a <a href="https://jsfiddle.net/vb44b1t9/1/" rel="nofollow noreferrer">jsfiddle</a>. Basically the purple element should be on top of the two orange bars, it should be the whole view screen.</p>
  
  <p>The whole story (before knowing what the problem was):</p>
  
  <p>I have the following situation, one toolbar on top of my page and one on bottom and some contents between. In that contents between I would like to have an element that could be full screen if I want, overlapping everything on the view screen (lets say make the whole screen black).</p>
  
  <pre><code>&lt;div id="top-toolbar" style="position: absolute; z-index: 1"&gt;&lt;/div&gt;
  &lt;div id="contents" style="position: absolute; z-index: 1"&gt;
      &lt;div id="fullscreen" style="position:fixed; z-index: 999"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="bottom-toolbar" style="position: absolute; z-index: 1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I know is that this seems impossible due to how stack order works.The <code>#fullscreen</code> element can only be as big as the <code>#contents</code> element is. Am I correct on this?</p>
  
  <p>Bare in mind that the toolbar elements can not be manipulated.</p>
  
  <p>Is the solution to just move the #fullscreen element outside of the #contents div when I need it to overlap everything and move it back inside when I don't?</p>
  
  <p>All this is in order to hack together a video "fullscreen".</p>
  
  <p>EDIT: It seems that what you all have suggested and what I did try before asking, that is to make the element fixed and stretch it, should work. However in my case for some reason it doesn't. The <code>#contents</code> element has some css property that prevents the fixed element to stretch further than the <code>#contents</code> size. If I put top:0 on the <code>#fullscreen</code> it will got to the top of the <code>#contents</code> and not the <code>document</code>/<code>body</code>. It seems to act as if it is not fixed but absolute.</p>
  
  <p>EDIT2: Found the culprit. The <code>#contests</code> has <code>transform: translate3d(0%,0,0px)</code>. Need a way to circumvent this now without touching the <code>#contents</code> css properties.</p>