El posicionamiento de los elementos de nuestra página según el modelo de formato visual es una característica muy potente que nos ofrece CSS y que podemos utilizar para conseguir diseños impactantes.
La norma es que los elementos sigan el flujo normal de la página, esto es que unas cajas vayan detrás de otras según la caja sea de bloque o de línea. Además de este posicionamiento, tenemos disponibles otros tipos que nos permitirán alterar el comportamiento predeterminado y ser muy precisos en lo relativo a donde se muestran nuestros elementos/cajas.
Los tipos de posicionamiento disponible son:
· Estático (por defecto)
· Flotante
· Relativo
· Absoluto
· Fijo
Todos estos tipos (excepto flotante) se controlan a través de la propiedad position. Es por ello que dejaremos la posición flotante para el final de este post.
Creo recordar que en algún lugar leí que para saber CSS había que conocer (y entender) lo siguiente:
· Modelo de formato visual y modelo de caja
· Posicionamiento flotante
Si te fijas, nadie habla de aplicar propiedades de color, fuente, etc. Eso se supone que ya sabes hacerlo (o casi, porque seguro que también tienen su miga). En cualquier caso, si has seguido mis post verás que ya estamos cerca de cerrar el círculo, pero… lo dicho, vamos con el posicionamiento.
Antes de profundizar en los distintos tipos de posicionamiento, es importante saber que el posicionamiento no tiene ningún efecto en los elementos hijos de una tabla (thead, tr, th, tbody, td, etc.). Puedes ampliar esta información es la especificación oficial de CSS 2.1 para la propiedad position.
RELATIVO (relative)
El elemento se sitúa respecto a la posición que debería haber tenido siguiendo el flujo normal de la página. Por ello, sus coordenadas base son las coordenadas que debería tener si no lo hubiéramos posicionado de forma relativa.
No afecta al resto de elementos de la página y no rompe el flujo normal de la página.
<head>
<style type="text/css">
#Div1, #Div2, #Div3
{
width: 100px;
height: 100px;
border: 1px solid Black;
}
#Div2
{
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="Div1">1</div>
<div id="Div2">2</div>
<div id="Div3">3</div>
</body>
Cómo podemos observar, la capa 2 se ha desplazado respecto a su posición original 50px a la izquierda y 50px hacía abajo, pero también apreciamos que a la capa 3 todo esto ni le va ni le viene y se coloca donde debería ir, es decir, actúa como si la capa 2 no hubiera cambiado su posicionamiento.
Por otro lado, si posicionamos un elemento de forma relativa, absoluta o fija, podría producirse un solapamiento como en el ejemplo anterior. En este caso, la propiedad z-index nos ayudará a controlar la posición de los elementos solapados en la pila.
| Si nos fijamos, para posicionar de forma efectiva un elemento, no basta con la propiedad display: relative, sino que hay que utilizar alguna de las propiedades top, left, right, bottom (igualmente para el posicionamiento absoluto y fijo).
Se dice que posicionar no es lo mismo que desplazar. Es decir, position posiciona y top, left, right y bottom desplazan. Aunque esto puede parecer obvio, más adelante veremos como el tipo de desplazamiento flotante “desplaza” pero no posiciona. |
ABSOLUTO (absolute)
Sus coordenadas base son relativas al primer elemento padre que no esté posicionado de forma normal (el primer elemento contenedor con la propiedad position distinta de static).
El posicionar elementos de forma absoluta rompe el flujo normal de la página y saca el elemento a un nuevo plano de posicionamiento (distinto del que utilizan el resto de elementos de la página). Los elementos siguientes no se sitúan a continuación sino que tratan al elemento posicionado de forma absoluta como si nunca hubiera estado ahí. Esto es “romper el flujo”.
Veamos el mismo ejemplo del caso anterior, pero ahora posicionado de forma absoluta (simplemente cambiaremos la propiedad position de relative a absolute).
Fijarse que para la capa 3, la capa 2 no existe.
FIJO (fixed)
Se comporta como el posicionamiento absoluto pero “fijado” en esa posición, por lo que si nos desplazamos por la página con las barras de desplazamiento, este elemento siempre estará “anclado” en la misma posición.
Este posicionamiento no está soportado por iPad ni iPhone. Pues ahora mismo y sin poder concretar la versión de iOS, ya está soportado este tipo de posicionamiento.
FLOTANTE
¡Y por fin llegó el posicionamiento flotante!
Tengo que serte sincero. Llevo muchos años programando HTML y CSS (con mejor o peor éxito) y nunca he terminado de entender el posicionamiento flotante. De hoy no pasa. ¡Palabrita del niño Jesús!.
El porqué es tan importante en el diseño web la posición flotante, es porque la estructura de cualquier página web más o menos compleja, se suele realizar con este tipo de posicionamiento. De hecho, cuando alguien dice: “mi diseño es tableless”, es que no utiliza tablas pero consigue la misma distribución a base de capas (div) con float. Créeme, el posicionamiento flotante es muy importante y tienes que dominarlo.
Lo primero que hay que decir es que el posicionamiento flotante no se consigue a través de la propiedad position, sino con la propiedad float (posicionar no es lo mismo que desplazar, y float sólo desplaza, no posiciona).
Tengo que reconocer que cualquier cosa que te cuente, no estará mejor explicado que aquí. Este enlace de www.libros.web me ha servido de inspiración.
El posicionamiento flotante tiene las siguientes características:
· Una caja “flotante” se desplaza al lugar posible más a la izquierda o más la derecha (según float: left o float: right) del lugar en el que estaba situada originalmente (respetando el margen y relleno de su bloque de contención).
· Al igual que el posicionamiento absoluto o fijo, el posicionamiento flotante rompe el flujo normal de la página. Esto significa que estos elementos están en otro plano de posicionamiento distinto del normal (el plano flotante) y por ello el resto de cajas ocupan el espacio que originalmente tenía la caja (produciendo muchas veces solapamiento). Ejemplo 1.
· Si hay más cajas flotantes, estas cajas sí tienen en cuenta la nueva posición del elemento posicionado de forma flotante, y respetan su nuevo espacio.
· Si la caja no tiene espacio suficiente para desplazarse a izquierda o derecha, forzará una nueva línea donde pueda colocarse. Ejemplo 2.
· Cuando una caja de bloque está posicionada de forma flotante, ya no toma automáticamente el ancho de su bloque de contención, y lo que hace es ajustarse a su contenido (se comporta en este sentido como una caja en línea). Ejemplo 3.
Ejemplo 1
Inicialmente tenemos 3 DIV:
<div style="background-color: Red; width: 50px; height: 50px;"></div>
<div style="background-color: Yellow; width: 50px; height: 50px;"></div>
<div style="background-color: Blue; width: 50px; height: 50px;"></div>
Ahora, hacemos que el DIV rojo flote a la izquierda
<div style="background-color: Red; width: 50px; height: 50px; float: left;"></div>
Vemos que el DIV rojo (el posicionado de forma flotante) se ha colocado lo más izquierda que ha podido y además ha roto el flujo normal de la página. Esto provoca que el DIV amarillo no sepa de su existencia y reclame el espacio original que ocupaba el DIV rojo. Siendo así, el DIV amarillo y el DIV rojo están situados en la misma posición (uno debajo de otro y producen un solapamiento).
Ahora posicionaremos el DIV amarillo también de forma flotante:
<div style="background-color: Yellow; width: 50px; height: 50px; float: left;"></div>
Podemos ver como el DIV amarillo si ha tenido en cuenta al DIV rojo (luego los elementos flotantes tienen en cuenta a otros elementos flotantes), pero el DIV azul sigue sólo en el flujo normal de la página y ahora es él el que está debajo del DIV rojo.
Si finalmente posicionamos de forma flotante también el DIV azul:
<div style="background-color: Blue; width: 50px; height: 50px; float: left;"></div>
Ejemplo 2
Partimos del resultado final del ejemplo 1 (los 3 DIV posicionados de forma flotante), pero ahora los metemos a todos dentro de un DIV con un ancho de 100px (insuficiente para los 3 DIV que suman 150px).
<div style="width: 100px;">
<div style="background-color: Red; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Yellow; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Blue; width: 50px; height: 50px; float: left;">
</div>
</div>
Como podemos ver, el DIV azul no encontró sitio suficiente para colocarse en la misma línea donde originalmente estaba y por ello ha forzado una nueva línea donde situarse.
Ejemplo 3
<div style="background-color: Red; float: left;"> Sergio</div>
<div style="background-color: Yellow; float: left;"> Carmen</div>
<div style="background-color: Blue; float: left">Jimena</div>
Hasta ahora hemos hablado todo el rato de elementos posicionados de forma flotante y su relación con otros elementos flotantes, pero ¿Cómo influye este posicionamiento en el resto de elementos que no están posicionados de forma flotante?
Si flotamos un elemento a la izquierda, estamos diciendo que el contenido que venga a continuación, “fluya” o se “distribuye” a la derecha del elemento flotante. Por el contrario, si flotamos a la derecha, estamos diciendo que queremos que siguientes elementos “fluyan” la izquierda del elemento.
Si retomamos el ejemplo 1 en el paso 2 (DIV rojo flotante y amarillo oculto porque está debajo del rojo), podemos ver que aparentemente el DIV amarillo no parecía “fluir” respecto al DIV rojo. En realidad, los elementos de bloque fluyen su contenido. Esto es que la el modelo de caja para el elemento que está fluyendo es el mismo, pero “adapta” su contenido para que fluya.
Si le quitamos al DIV azul la anchura y le agregamos contenido:
<div style="background-color: Red; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Yellow; width: 50px; height: 50px; float: left;">
</div>
<div style="background-color: Blue; color: White; height: 50px;"> Contenido</div>
Vemos que el DIV azul comienza en la izquierda (aquí parece que no, pero en realidad comienza en el mismo lugar que el DIV rojo), y es el contenido el que se ha “adaptado” para fluir a la izquierda del DIV amarillo. De hecho, si el DIV azul tuviera una imagen de fondo (background-image), perderíamos 100 pixeles de la imagen porque estaría solapado por los DIV rojo y amarillo.
Limpiar los floats
Cuando queremos que siguientes elementos ya no “fluyan” más, hay que utilizar la técnica denominada “limpiar los float”. Esto se consigue con la propiedad clear. Esta propiedad especifica qué lado del elemento no debe fluir más. La técnica consiste en incluir un elemento como el siguiente:
<div style=”clear: both”><div>
Con esta técnica también permitimos que el bloque de contención donde están alojados los elementos flotantes, se ajuste automáticamente al alto de su contenido (que ahora sí, incluirá los elementos flotantes).
Un saludo!
Estoy leyendo muchos de tus post.
ResponderEliminarMuy groso.. sos muy groso..
Muy bien explicado, y tengo la suerte de leer alguien que escribe de la misma forma que yo, así que te entiendo perfectamente.
Muchas gracias!!
Gracias Broda!
ResponderEliminarPor lo menos tengo un lector en Internet, sólo con eso me doy por satisfecho ;-)
Muy buen trabajo, incluso en librosweb es más lioso o no lo hacen tan ameno y mira que me gusta esa página. Eres un crack!!!
ResponderEliminarHola. Muy buena tu pagina y tus explicaciones. Estoy aprendiendo CSS gracias a personas como tu que altruistamente lo explican.
ResponderEliminarNo se si estoy equivocado por que todavía me hago un lio con tanto DIV flotante pero en la parte que dices "Si retomamos el ejemplo 1 en el paso 2 ..." en realidad seria el paso 3 que es donde el DIV azul esta escondido y al meterle contenido aparece. Y después donde dices "Si quitamos al DIV amarillo la anchura ..." en realidad quieres decir al DIV azul que luego en el código es donde lo eliminas el ancho.
No se si estoy en lo cierto, pero si es así me alegraría mucho porque empiezo a entender lo que me están explicando. Si no es así, pido disculpas y volveré a leerlo mas detenidamente.
Gracias.
me gustas mucho te amo .... vegettta777 me agradecera despues de que haga su pagina para publivcar fotos de nosotros y despues poder vivir de eso e irnos a vivir a venezuela... maduro <3
ResponderEliminarEse de arriba es Alvaro Adrian Condori Anconeira
ResponderEliminar:v
ResponderEliminar