title: using css rotate with HTML absolute position
body: <p>I'm new to the css transform rotation and want to know how to get it to work with absolute positioning within its parent element. Could anyone help?</p>
  
  <p><img src="https://i.stack.imgur.com/YEfBK.png" alt="enter image description here"></p>
  
  <p>Here is a test snippet that mostly does what I want, but the rotated text shows up in the wrong spot. I want it to be in the left padding area of the foo, bar1, and bar2 bubbles.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
  div.item {
   display: block;
   border: 1px solid #888;
   border-radius: 5px;
   padding: 2px 15px;
  }
  span.rotated {
   display: block;
   position: absolute;
   left: 0px;
   bottom: 0px;
   font-family: Verdana, sans-serif;
   font-size: smaller;
      -ms-transform:rotate(270deg); /* IE 9 */
      -moz-transform:rotate(270deg); /* Firefox */
      -webkit-transform:rotate(270deg); /* Safari and Chrome */
      -o-transform:rotate(270deg); /* Opera */
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="item"&gt;foo&lt;span class="rotated"&gt;foodoo the voodoo&lt;/span&gt;
    &lt;div class="item"&gt;bar1&lt;span class="rotated"&gt;bar bar bar bar Barbara Ann&lt;/span&gt;
   &lt;div class="item"&gt;baz1&lt;/div&gt;
   &lt;div class="item"&gt;baz2&lt;/div&gt;
   &lt;div class="item"&gt;baz3&lt;/div&gt;
   &lt;div class="item"&gt;baz4&lt;/div&gt;
   &lt;div class="item"&gt;baz5&lt;/div&gt;
   &lt;div class="item"&gt;baz6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;bar2&lt;span class="rotated"&gt;Barber of Seville&lt;/span&gt;
   &lt;div class="item"&gt;baz7&lt;/div&gt;
   &lt;div class="item"&gt;baz8&lt;/div&gt;
   &lt;div class="item"&gt;baz9&lt;/div&gt;
   &lt;div class="item"&gt;baz10&lt;/div&gt;
   &lt;div class="item"&gt;baz11&lt;/div&gt;
   &lt;div class="item"&gt;baz12&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>