h3 not displaying in absolutely positioned div-CodePudding

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.

HTML

<div >
    <h3  style="display: block">
    <img .... width, height and a rotation specified here>
</div>

CSS

.asteroid {
        position: absolute;
}
.asteroid-name {
    color: white;
    font-size: 2rem;
}

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 "display: none" 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

CodePudding user response：

Correct me if I'm wrong but the h3 element you have specified in your example contains no content and has no closing tag, so I don't understand what you're expecting to see?

See below code example where I've added content and the closing tag.

.asteroid {
  position: absolute;
  background-color: blue;
}

.asteroid-name {
    color: white;
    font-size: 2rem;
}

<div >
  <h3  style="display: block">Test</h3>
  <img src = "https://via.placeholder.com/150">
</div>