title: h3 not displaying in absolutely positioned div
body: <p>Im having difficulty displaying my h3 on the page. I have an absolutely positioned div that is going to move around my window. Inside I have an image and an h3 that moves when the div is moves. The image is displaying on the screen but the h3 is not. The height of the h3 is 0, I've tried using the clearfix trick, setting width/height and overflow: auto, but to no avail.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.asteroid {
          position: absolute;
  }
  .asteroid-name {
      color: white;
      font-size: 2rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="asteroid"&gt;
      &lt;h3 class="asteroid-name" style="display: block"&gt;
      &lt;img .... width, height and a rotation specified here&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The reason I specify display block for the h3 is because I am adding all these elements through my JS. Each one of these divs is generated based on an object I receive from an API. I initially have 2 h3s, both set to &quot;display: none&quot; and based on the direction of travel, I choose to either display the h3 above this img, or an h3 that would be below it</p>