title: React - Transform scale on hover messes with position absolute of sub component
body: <p>I have an issue where I want to scale a <code>frame</code> on hover. When I do so a <code>sub</code> component, that have position absolute in the top right corner of the parent of <code>frame</code> pops in a out of the component that scales.</p>
  <p>I want the component <code>sub</code> to stay in place at all times, however I can't really figure out how to do so.</p>
  <p><a href="https://codesandbox.io/s/upbeat-burnell-6sdlp?file=/src/App.js" rel="nofollow noreferrer">code sandbox here</a></p>
  <p>I tried messing a bit with <code>transform-origin</code> but I can't figure out if that could solve my problem as is right now. I believe that something happens &quot;behind the scenes&quot; when I transform <code>frame</code>, but I can't figure out what it is.</p>
  <h1>EDIT:</h1>
  <p>Thanks for the answers. However I assume I wasn't quite clear with what I wanted to achieve. I want the child to stay right where it is on the <code>frame</code> component (top right corner), so when <code>frame</code> scales up the <code>sub</code> still stays those (<code>15px</code>) outside of <code>frame</code>.</p>
  <p>In the meantime I figured out what my problem is. As my <code>App</code> is a div <code>frame</code> increases the size of <code>App</code> as it scales up. As far as I remember <code>div</code> parents usually scale to the same size as their child components, and this seems to be the issue here.</p>
  <p>It became clear to me when I put a border on <code>App</code>. So with that in mind it might be a better solution to put <code>position: relative</code> on <code>frame</code> and just position <code>sub</code> negatively on <code>top</code> and <code>right</code>.</p>
  <p>Yet again, thanks for the answers. They helped me in the right direction.</p>