My challenge is with getting my h3 element to appear on the page as intended. I have a div that is positioned absolutely and will be moving around the window. Within this div, there is an image and an h3 that should move along with it. While the image displays properly, the h3 does not seem to be appearing. The height of the h3 remains at 0, despite my attempts to use various solutions like the clearfix trick, setting width/height, and overflow: auto.
.asteroid {
position: absolute;
}
.asteroid-name {
color: white;
font-size: 2rem;
}<div class="asteroid">
<h3 class="asteroid-name" style="display: block">
<img .... width, height and a rotation specified here>
</div>I specifically set display block for the h3 because these elements are being added dynamically through JavaScript. Each of these divs is generated based on an object received from an API. Initially, I start with two h3 elements, both set to "display: none," and depending on the direction of travel, I decide whether to show the h3 above or below the image.