Posición de la caja
ABSOLUTE
Las cajas son quitadas del flujo normal de la página y su posición se
especifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades
especifican los desplazamientos con respecto al bloque de contención de la caja
por lo que los elementos posicionados absolutamente no tienen ninguna
influencia sobre la posición de las cajas siguientes. El bloque de contención para
una caja posicionada es establecido por el antepasado posicionado más cercano
o, si no existe, por el bloque de contención inicial (la esquina superior izquierda
de la página, en el modelo visual).
ABSOLUTE
Las cajas son quitadas del flujo normal de la página y su posición se
especifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades
especifican los desplazamientos con respecto al bloque de contención de la caja
por lo que los elementos posicionados absolutamente no tienen ninguna
influencia sobre la posición de las cajas siguientes. El bloque de contención para
una caja posicionada es establecido por el antepasado posicionado más cercano
o, si no existe, por el bloque de contención inicial (la esquina superior izquierda
de la página, en el modelo visual).
FIXED
El posicionamiento fijo es una subcategoría del posicionamiento absoluto.
La única diferencia es que para una caja posicionada de modo fijo, el bloque de
contención es establecido por el acceso visual (la pantalla del monitor) y el
elemento no se mueve cuando se realiza un desplazamiento. Esto significa que
cuando se hace un scroll en la página los elementos con position: fixed
mantienen su posición en la pantalla.
RELATIVE
La posición de la caja se ajusta en relación a su posición normal dentro de
la página. Cuando una caja X se posiciona relativamente la caja siguiente se
sitúa como si X no se hubiera desplazado.
STATIC
Esta es la posición predeterminada y la que conocemos en HTML. La caja
se sitúa dentro del flujo normal de la página y las propiedades 'top', 'right',
'bottom' y 'left' no se aplican.
RELATIVE
La posición de la caja se ajusta en relación a su posición normal dentro de
la página.
Posición de caja dentro de caja
Para las cajas con position:absolute, el desplazamiento es con respecto al
bloque de contención de la caja.
Para las cajas con position:relative, el
desplazamiento es con respecto al borde externo de la propia caja (es decir, la caja de
desplaza de su posición normal dentro de la página de acuerdo a estas propiedades).
Para las cajas con position:absolute, el desplazamiento es con respecto al
bloque de contención de la caja.
Para las cajas con position:relative, el
desplazamiento es con respecto al borde externo de la propia caja (es decir, la caja de
desplaza de su posición normal dentro de la página de acuerdo a estas propiedades).
Relative y float:left;
width:10%;
absolute y float:left;
absolute y float:right, clear:right;
Relative y float:right;
width:20%;