Come si ferma un div che occupa spazio?

Question

sto facendo cose con ajax barre di avanzamento e roba ...

Fondamentalmente ho un div nascosto che dice "Loading" in esso, e sotto di esso ho un div visibile con il mio contenuto in.

Durante il caricamento, dissolve il contenuto div, rende visibile il div nascosto e lo sposta tramite javascript/posizionamento relativo per essere nel mezzo del contenuto.

Sembra piuttosto pessimo, ma sfortunatamente quando il div è reso visibile, anche se è posizionato relativamente, prende una linea in modo che il mio contenuto scenda.

Sai come posso impedirgli di occupare spazio quando è reso visibile?

Edit: Qualcuno ha rimosso il tag sembra

Il div carico inizia visualizzazione nessuno, in modo che non occupa spazio, e poi, quando si è reso visibile, si inizia a prendere spazio, anche se è posizionato relativamente.

Potrei usare visibile e non visibile, ma poi forzerebbe la finestra del mio contenuto tutto il tempo.

Sembra che il posizionamento assoluto sia la strada da percorrere.

Quello che voglio fare è combinare il posizionamento assoluto e relativo. Sto cercando di ottenere le coordinate assolute del contenuto div e impostare la sua posizione in quel modo, ma senza successo ancora.

Modifica: ho appena riletto la tua risposta e hai fatto esattamente questo. Grazie!

Answer 1

"Sai come posso impedirgli di occupare spazio quando è reso visibile?"

Posizionarlo assolutamente.

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

Quando si desidera renderlo invisibile, renderlo veramente invisibile con style="display:none". Ci sono molti modi per farlo ... non sono sicuro di come tu abbia questo set up o di come stai modificando i tuoi domini. Fornisci un contesto in più (facendo questo con i controlli Ajax, JavaScript personalizzato, una libreria come jQuery, ecc.) E possiamo darti una soluzione più specifica.

Answer 3

Puoi provare varie cose, come. Dipende da come viene costruito il tuo codice. Dal momento che non hai fornito un esempio :)

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

Answer 4

Devi giocare con il display opzione , non l'opzione visibile:

Suggerimento: Anche gli elementi invisibili occupa spazio sul la pagina. Usa la proprietà "display" per creare elementi invisibili che non occupano spazio!

vedere w3schools

[EDIT]

Dopo aver letto w3fools, anche se non raccolto alcun errore su di pr_class_visibility, fanno circa pr_class_display: così never see w3schools

Ma voi può vedere reference.sitepoint.com:

I riquadri discendenti di una casella nascosta saranno visibili se la loro visibilità è impostata su visibile, mentre i discendenti di un elemento per il quale la visualizzazione è impostata su Nessuno non potranno mai generare caselle a parte.

Answer 5

So che questo è stato risposto, ma se si utilizza prova di bootstrap:

class='hide' 

invece di

class='hidden'