Tengo dificultades para mostrar mi h3 en la página. Tengo un div absolutamente posicionado que se moverá alrededor de mi ventana. Dentro tengo una imagen y un h3 que se mueve cuando se mueve el div. La imagen se muestra en la pantalla pero el h3 no. La altura del h3 es 0, he intentado usar el truco clearfix, configurando ancho/alto y desbordamiento: automático, pero fue en vano.
.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>La razón por la que especifico el bloque de visualización para el h3 es porque estoy agregando todos estos elementos a través de mi JS. Cada uno de estos divs se genera en base a un objeto que recibo de una API. Inicialmente tengo 2 h3, ambos configurados en "mostrar: ninguno" y, según la dirección de viaje, elijo mostrar el h3 encima de esta imagen o un h3 que estaría debajo.
Corríjame si me equivoco, pero el elemento h3 que especificó en su ejemplo no contiene contenido y no tiene una etiqueta de cierre, por lo que no entiendo lo que espera ver.
Vea el ejemplo de código a continuación donde he agregado contenido y la etiqueta de cierre.
.asteroid { position: absolute; background-color: blue; } .asteroid-name { color: white; font-size: 2rem; } <div class="asteroid"> <h3 class="asteroid-name" style="display: block">Test</h3> <img src = "https://via.placeholder.com/150"> </div>