title: Reusing component with absolute position in a flexbox
body: <p>I simply can not wrap my head around positioning. In my app I have some tiles (or think playing cards). these cards are dynamically created, say I want a number in the upper left and lower right. I have some code like</p>
  <p>React code</p>
  <pre><code>&lt;div  className='PlayingCard'&gt;
      &lt;span classname='upperNumber'&gt; {number} &lt;/span&gt;
      &lt;span classname='LowerNumber'&gt; {number} &lt;/span&gt;
  &lt;div&gt;
  </code></pre>
  <p>css</p>
  <pre><code>.PlayingCard{
     width: 50px;
     height: 100px;
  }
  
  .upperNumber{
     position: absolute;
     top: 5px;
     left 5px;
  }
  
  .lowerNumber{
     position: absolute;
     top: 80px;
     left 40px;
  }
  </code></pre>
  <p>So the issue is that absolute is relative to the only a container that is also absolute. making playing card absolute will make A single card display correctly.  But in my case the cards will be in a flexbox so I can't make it absolute.  Is there a way to make a complicated component that has internal absolute (or absolute like) positions but have it be use in a flexbox or any other way I'd like.</p>
  <p>For the moment I've make the numbers in the card relative however some of the cards have a variable number of items in them so it shifts things unacceptably.</p>