html - span - ¿Cómo puedo evitar que un div ocupe espacio?

en que parte de la estructura de html puedo ubicar el div

Question

Estoy haciendo cosas con barras de progreso ajax y esas cosas ...

Básicamente tengo un div oculto que dice "Cargando", y debajo tengo un div visible con mi contenido en.

Cuando se está cargando, desvanece el contenido div, hace visible el div oculto y lo mueve a través de javascript / posicionamiento relativo para estar en el centro del contenido.

Parece bastante rudo pero desafortunadamente cuando el div se hace visible, a pesar de que está relativamente posicionado, toma una línea para que mi contenido se mueva hacia abajo.

¿Sabes cómo puedo evitar que ocupe espacio cuando se hace visible?

Edit: Alguien quitó la etiqueta que parece

La división de carga comienza sin mostrar, por lo que no ocupa espacio, y luego, cuando se hace visible, comienza a ocupar espacio, aunque se encuentre en una posición relativa.

Podría usar visible y no visible, pero entonces forzaría mi ventana de contenido hacia abajo todo el tiempo.

Parece que el posicionamiento absoluto es el camino a seguir.

Lo que quiero hacer es combinar el posicionamiento absoluto y relativo. Estoy tratando de obtener las coordenadas absolutas del div contenido y establecer su ubicación de esa manera, pero sin éxito todavía.

Edición: acabo de volver a leer tu respuesta y has hecho exactamente eso. ¡Gracias!

Answer 1

"¿Sabes cómo puedo evitar que ocupe espacio cuando se hace visible?"

Colóquelo absolutamente.

div#theParent {
position:relative;
height:200px;
width:640px;
top:50px;
left:50px;
}
div#theChild {
position:absolute;
height:100px;
width:400px;
top:50px;
left:120px;
}
<div id="theParent">
<div id="theChild">
<p>This div is absolutely positioned to a relatively-positioned parent.</p>
</div>
</div>

Answer 2

Cuando quiera hacerlo invisible, hágalo realmente invisible con style="display:none" . Hay muchas formas de hacer esto ... no estoy seguro de cómo está configurado o cómo está modificando sus elementos de dom. Proporcione un poco más de contexto (haciendo esto con controles Ajax, JavaScript personalizado, una biblioteca como jQuery, etc.), y podemos darle una solución más específica.

Answer 3

Puedes probar varias cosas, como. Depende de cómo se construye tu código. Ya que no proporcionaste un ejemplo :)

display: none;
height:0px
line-height: 0px;
font-size: 0px;

Answer 4

Sé que esto ha sido respondido, pero si está usando bootstrap intente:

class=''hide''

en lugar de

class=''hidden''

Answer 5

Tienes que jugar con la opción de visualización , no con la opción visible :

Consejo: Incluso los elementos invisibles ocupan espacio en la página. Use la propiedad "mostrar" para crear elementos invisibles que no ocupen espacio.

ver w3schools

[EDITAR]

Después de leer w3fools , incluso si no w3schools ningún error acerca de w3schools , lo hacen sobre pr_class_display : así que w3schools

Pero puedes ver reference.sitepoint.com :

Los cuadros descendientes de un cuadro oculto serán visibles si su visibilidad está configurada como visible, mientras que los descendientes de un elemento para el que la pantalla no está configurada en ninguno, nunca podrán generar cuadros propios.