¿Cómo hacer que los elementos de posición absoluta se muevan con el resto de la página?

Question

Cuando posiciono un objeto de manera absoluta, está atorado allí. Cuando cambia el tamaño de la ventana del navegador, permanece allí mientras los otros objetos se deslizan, matando todo el punto.

Ahora esto es solo para mí. Obviamente, funciona en sitios web normales, como el que tiene ahora. cuando cambia el tamaño de la ventana, todo se mueve y permanece en su plantilla general.

¿Cómo puedo lograr esto con un posicionamiento absoluto?

Answer 1

Debe colocar el div completamente posicionado dentro de una posición div relativamente. Cada vez que se mueve el div relativamente posicionado, el div posicionado absoluto también se moverá con él.

<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; 
} 

Comprobar ejemplo de trabajo en http://jsfiddle.net/w2EMu/

Answer 2

La mejor solución sería evitar el posicionamiento absoluto. Pero si lo usa y desea reposicionar su objeto absoluto, puede registrar un método de cambio de tamaño. P.ej. jQuery.resize() y reposicione usted mismo. Si no está utilizando jQuery, debe usar document.addEventListener y document.attachEvent.