JSFiddle - React, Tailwind, and code Playground

by crnacura

HTML

<div class="outer"><div>I'm fixed and I want to be 50% of the viewport and not my parent</div></div>

<p>"In the HTML namespace, any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."</p>
<p><strong>"ISSUE: Is this effect on position:fixed necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it's much harder to implement otherwise."</strong></p>

<a href="http://www.w3.org/TR/2012/WD-css3-transforms-20120403/">http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a>

CSS

body { padding: 30px; font-family: Arial; } p { padding: 40px; }

div {
  background: blue;
  width: 300px;
  height: 300px;
  position: relative;
  -webkit-perspective: 1400px;
  perspective: 1400px;
}

div > div {
  position: fixed;
  background: #aaa;
  width: 50%;
  height: 50%;
  padding: 30px;
}