title: CSS absolute positioning is not moving to parent, the parent is relative
body: <p>I am trying to absolutely position sideways text inside a div that there are multiple occurences of.</p>
  
  <p>Each child has position: absolute; ,
  and each parent has position: relative;</p>
  
  <pre><code>    .parent{
      width: 24%;
      display: inline-block;
      float: left;
      border-left: 1px solid #FFA500;
      position: relative;
      }
  
      .child{
      display: inline-block;
      line-height: 1.5;
      height: 5%;
      position: absolute;
      top: 0px;
      right: 0px;
      transform: translate(0px, 100%) rotate(90deg);
      overflow: hidden;
      float: right;
  }
  </code></pre>
  
  <p>Of of the children go to the same exact place on the page, which seems to be the first childs parent.
  The structure is</p>
  
  <pre><code>Parent
      child
  close
  close
  </code></pre>
  
  <p>for all 4 divs.</p>
  
  <p>Can anyone please help?</p>