Come spostare gli elementi posizionati in modo assoluto con il resto della pagina?

Question

Quando posiziono in modo assoluto un oggetto, è bloccato lì. Quando ridimensiona la finestra del browser, rimane lì mentre gli altri oggetti scorrono in giro, uccidendo così l'intero punto.

Ora questo è solo per me. Ovviamente funziona su normali siti web, come quello su cui stai lavorando adesso. quando ridimensionate la finestra, tutto si muove e rimane nel suo modello generale.

Come posso ottenere questo con il posizionamento assoluto?

Answer 1

È necessario mettere il div in posizione assoluta all'interno di un div di posizione relativamente. Ogni volta che il div posizionato in modo relativo si muove, anche il div posizionato in posizione assoluta si sposta con esso.

<div class="relative" > 
    <div class="absolute">absolute</div> 
</div> 

.relative{ 
    position:relative; 
    top:100px; 
    left:100px; 
    width:500px; 
    height:500px; 
    background:blue; 
} 


.absolute{ 
    position:absolute; 
    width:100px; 
    height:100px; 
    background:red; 
    top:30px; 
    left:50px; 
} 

check esempio lavorando a http://jsfiddle.net/w2EMu/

Answer 2

La soluzione migliore sarebbe evitare il posizionamento assoluto. Ma se lo si utilizza e si desidera riposizionare l'oggetto assoluto, è possibile registrare un metodo di ridimensionamento. Per esempio. jQuery.resize() e riposizionalo da solo. Se non si utilizza jQuery, è necessario utilizzare document.addEventListener e document.attachEvent.