Domingo, 19 Febrero 2017 21:12

Laboratorio web: Los positionamientos static, relative, absolute y fixed

Valora este artículo
(1 Voto)

Cabezal posicionamientos html css

Experimentando con static, relative, absolute, fixed

En esta entrada exploraremos, de manera no formal, el comportamiento de tres divs (etiquetas de bloque) al someterlos a cambios de posicionamientos usando estilos CSS.

En todos los casos, y solo por motivos de practicidad al momento de descargar los ejemplos, hemos definido los estilos css en la cabecera de cada página; veamos cuáles son estas definiciones, así como los comportamientos generados, a través de 9 ejemplos sencillos.

Nota importante: se recomienda leer los códigos de cada documento html donde encontrarán explicaciones similares a las publicadas en esta entrada:

1. position: static; el posicionamiento "natural" de las etiquetas de bloque dentro del flujo normal del html:

 3 divs con position: static;

Este ejemplo muestra el posicionamiento natural de las etiquetas de bloque dentro del flujo normal del html (static); en el cual cada bloque ocupa el 100% del ancho de su contenedor, la mínima altura posible (en este caso, la altura del párrafo contenido dentro de ellos); y se posiciona debajo del bloque anterior.

Los colores asignados, como en todos los casos, son únicamente para permitir la visualización de cada bloque, una vez renderizados en el agente de usuario.

Vista en vivo: Clic aquí.

2. Cambiando el ancho y alto de un bloque HTML:

Cambiando el ancho y alto de un div

A diferencia del ejemplo anterior, en que los divs ocupan el 100% del ancho de su contenedor (el body en ambos casos), hemos asignado una anchura diferente a cada div, así como una altura especificada. Como vemos, independientemente de que el div tenga espacio o no, cada div se posicionará debajo del anterior, cumpliendo con lo que indica el flujo normal del html.

Vista en vivo: Clic aquí.

3. El comportamiento de un bloque con posicionamiento static no cambiará aunque asignemos a éste valores top, right, bottom o left.

Analizando los estilos definidos en la cabecera del archivo de ejemplo, vemos que #dos tiene coordenadas asignadas (top = -100px; left = 50px;), pero éstas no se ven reflejadas en el renderizados del código; ésto se debe a que, bajo el posicionamiento static no podemos cambiar las coordenadas de un bloque a través de las propiedades top, right, bottom o left.

Vista en vivo: Clic aquí.

4. Relative mostrando el cambio de coordenadas a través de left y top:

Cambiando las coordenadas con position: left;

Como vimos en el ejemplo del punto anterior, asignar coordenadas (top, right, bottom, left) a un bloque posicionado con posicionamiento static no generará cambios visuales en el renderizado del código; para que esto suceda debemos sacar al bloque del posicionamiento static.

Si revisamos los estilos definidos en la cabecera de este ejemplo, veremos que el posicionamiento del id="dos" ha sido cambiado a relative.

Bajo el posicionamiento relative un elemento de bloque admite coordenadas superior (top) e izquierda (left), pero no para coordenada derecha (right) ni inferior (bottom).

Como vemos en la vista en vivo de este ejemplo, si renderizamos el código en el navegador, a pesar de que #dos cambia visualmente su posición, #tres se mantiene ocupando el mismo espacio; esto es porque el cambio de posición de #dos es únicamente visual; "físicamente" ocupa el mismo lugar que bajo el posicionamiento static.

Vista en vivo: Clic aquí.

5. Cambiando las coordenadas de un bloque a través de position: absolute;

Posicionamiento absoluto

En este caso hemos cambiado el posicionamiento de #dos, esta vez a position: absolute; bajo cual la caja admitirá las coordenadas top, right, bottom y left, las cuales serán medidas respecto a los bordes del primer bloque que lo contenga, con cualquier posicionamiento diferente al static; en caso contrario, se posicionará respecto a los bordes del agente de usuario, desplazándose con éste si es que se produce scroll (ver siguiente ejemplo).

Como vemos, #dos se renderiza por encima de #uno y #tres, a pesar de que éste último se declara más abajo dentro del html; esto es porque el posicionamiento cambia el orden de los renderizados. Como vemos también, #tres ignora completamente la existencia y posición tomada por #dos. Se dice que #dos se ha salido del flujo normal del html.

Vista en vivo: Clic aquí.

6. Posicionando un div respecto al borde del agente de usuario a través de la propiedad bottom:

Posicionamientos absolutos 

Vemos en este caso cómo asignando posicionamiento absoluto a #tres, la caja tomará las coordenadas (top, right, bottom, left) respecto a los bordes del primer bloque que lo contenga, con cualquier posicionamiento diferente al static; en caso contrario, se posicionará respecto a los bordes del agente de usuario, desplazándose con éste si es que se produce scroll;

Si vemos la vista en vivo, vemos como #tres se desplaza cuando hacemos scroll en la página; en este ejemplo #tres tiene por contenedor al body, cuyo posicionamiento está fijado en static; para ver el cambio de comportamiento al alterar el posicionamiento el body ver el siguiente ejemplo. 

Nota: Auxiliarmente se le asignó altura al body para poder generar scroll en el navegador y ver el desplazamiento de #tres.

Vista en vivo: Clic aquí.

7. Comportamiento de un bloque con position: absolute; dentro de una caja en static:

Position absolute dentro de un position static

Respecto al ejercicio anterior, hemos cambiado el posicionamiento de body a static a relative para ver como el comportamiento de #tres cambia completamente, posicionándose esta vez respecto a los bordes de body. En el gráfico anterior #tres está fuera del área de visualización debido a la altura asignada a body para el ejemplo; usar la vista en vivo de este ejemplo para comporbar su comportamiento.

Vista en vivo: Clic aquí.

8. El posicionamiento fixed:

El comportamiento del posicionamiento fixed

Cambiando el posicionamiento de #dos a fixed (con coordenadas superior 50px y derecha 20px) vemos que éste se ubica tomando en cuenta a los bordes del agente de usuario; pero a diferencia del posicionamiento absolute, esta referencia no cambiaindependientemente del posicionamiento que tenga su contenedor.

Como vemos, #tres ignora completamente la ubicación de #dos, a la vez que este último se renderiza por encima de #uno y #tres (#dos está fuera del flujo normal del html).

Vista en vivo: Clic aquí.

9. Renderizado de los posicionamientos absolute y fixed:

Absolute y fixed operando juntos en una misma página web

En este último ejemplo vemos el comportamiento de #dos y #tres, cuando tenemos al primero con position: fixed; y al segundo con position: absolute;

El orden de renderizado de cajas con position absolute y fixed dependerá del orden en que las hayamos escrito dentro del código del html.

Vista en vivo: Clic aquí.


Espero que los ejemplos ayuden a ilustrar más claramente el comportamiento de un bloque cuando alternamos los valores de su posicionamiento entre static, relative, absolute y fixed, así como el comportamiento relativo a otros posicionamientos dentro de una misma página web.

Saludos para todos!
Plácido Luna.

Visto 289 veces Modificado por última vez en Lunes, 20 Febrero 2017 13:36