title: Fullscreen absolute child positioning
body: <p>I've been at this for a while, but I can't seem to figure out a proper way of doing this. Within my application I have a modal view inwhich there is a component that needs to take up the fullscreen. The problem I'm having is that the element is placed relative to their parent. While I need the positioning relative to the html body. Is there any way I can do this? I've made a simple fiddle showing the problem more clearly.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;modal&quot;&gt;
    &lt;div class=&quot;fullscreen&quot;&gt;
      test
    &lt;/div&gt;
  &lt;/div&gt;
  
  .modal {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .fullscreen {
    background: rgba(231, 29, 91, 0.5);
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
  </code></pre>
  <p><a href="https://jsfiddle.net/x05h13u6/1/" rel="nofollow noreferrer">Fiddle</a></p>
  <p>The only solution I've so far been able to find myself is the following;</p>
  <pre><code>.fullscreen {
    background: rgba(231, 29, 91, 0.5);
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: calc(-50vh + 50%);
    left: calc(-50vw + 50%);
  }
  </code></pre>
  <p>But this isn't very pretty.</p>