Ir directamente al contenido de esta página
id y classPosicionar o flotar un elemento altera la situación de ese elemento con respecto al lugar que ocuparía en caso de que no se hubiesen aplicado ninguna de estas propiedades. Por eso es importante que antes de hablar de estas alteraciones comprendamos cómo se situan los elementos según lo que se suele llamar el flujo normal del documento.
Al representar en un medio de pantalla un documento, todo elemento genera una caja. Dependiendo del tipo de elemento, se tratará de una caja de bloque o de una caja en línea, pero la idea básica es que ambos ocupan un espacio, y que según su posición en el marcado afectan a la posición de los elementos adyacentes. Todo elemento de línea se extiende hasta el límite de su contenido, desplazando a los demás elementos en línea con los que comparte contenedor. Por su parte, los elementos de bloque se sitúan siempre debajo de los elementos de bloque anteriores y «empujan» a los bloques siguientes más abajo a la hora de ser representados.
Básicamente, esto es el flujo del documento: los elementos ocupan un espacio y sitúan tras de sí a los elementos siguientes, según el orden en el que aparecen en el marcado.
Cuando aplicamos la propiedad de CSS position podemos alterar la situación de un elemento con respecto al flujo normal del documento. position tiene cuatro valores:
static: Es el valor por defecto. En estático un elemento se representa en el lugar que le corresponde en el flujo normal, es decir, su posición se ve afectada por los elementos anteriores y, a su vez, afecta a los posteriores. Así, el siguiente elemento debe comenzar a representarse donde termine éste.relative: Con este valor, el elemento se representa visualmente donde se indique a través de las propiedades top, bottom, left y right, pero a efectos del flujo sigue ocupando su posición orginal.absolute: Este valor reposiciona el elemento, pero sacándolo del flujo normal del documento; por tanto, deja de afectar a los elementos posteriores.fixed: Funciona como absolute, pero con la diferencia de que bloquea el desplazamiento del elemento. En un medio de pantalla, significa que deja de verse afectado por una posible barra de desplazamiento de la interfaz del agente de usuario1.Vamos a ver las diferencias con unos ejemplos.
Primero, tenemos un documento con tres elementos a los que no he asignado position, por lo que se aplica el valor por defecto, static. Según el flujo normal del documento, cada uno se sitúa en el orden que le corresponde por el marcado, y su altura define el lugar que le corresponde al siguiente.
Si ahora asignamos al segundo una posición relativa, aunque el navegador nos lo represente desplazado de su posición normal, la situación de los elementos primero y tercero no varía, puesto que la situacion «real» del elemento sigue siendo la que tenía como elemento estático.
Si en lugar de eso le asignamos una posición absoluta, deja de afectar al resto de los elementos del documento. Así, tercer elemento se reposiciona con respecto al anterior elemento que tenga asignada una posición estática o relativa, en este caso el primero.
Por último, si hacemos que su posición sea fija el resto de elementos se comportarán para como si su posición fuese absoluta, pero no se verá afectado por la barra de scroll lateral.
Sólo queda indicar cómo se sitúan los elementos posicionados de manera relativa o absoluta. Como ya he dicho antes, se hace por medio de de las propiedades top, left, right y bottom —que aceptan valores positivos o negativos—, pero se aplican con puntos de referencia diferentes:
top se aplica con respecto al borde superior original, left respecto al borde izquierdo, right respecto al derecho, y bottom respecto al inferior.top, left, right y bottom hacen referencia a la distancia entre el borde especificado y el borde correspondiente al del primer ancestro en el árbol del documento que tenga asignada una posición distinta de static. Si no existe ninguno que cumpla estas condiciones, se toma como referencia el punto 0,0 del área de visión del agente de usuario. En los dos ejemplos siguientes tengo un elemento posicionado de manera absoluta anidado dentro de otro elemento, pero en el primer ejemplo el padre no tiene posición, y en el segundo sí. Para terminar, un apunte sobre márgenes. En el caso de los elementos posicionados de manera relativa, los márgenes se mantienen en la posición original del elemento, pero no cuentan para establecer los bordes iniciales desde los que se aplican las propiedades de posición. En el caso de los elementos en posición absoluta, los margenes se aplican de la manera habitual.
Además de position, existe otra propiedad que puede alterar el flujo normal de un documento: float. Cuando se flota un elemento, se convierte en un elemento de bloque que se sitúa adyacente al borde elegido de su bloque contenedor, y el resto del contenido con el que lo comparte se reparte alrededor de él.
Los valores de float son los siguientes:
left: El elemento flota hasta que su borde izquierdo queda adyacente al borde izquierdo de su contenedor.right: El elemento flota hasta que su borde derecho queda adyacente al borde derecho de su contenedor.none: El elemento no flota, y conserva su posición normal en el flujo del documento.Hasta aquí, la parte intuitiva. Ahora, hagamos otra lista con las puntualizaciones que hay que memorizar para luego no sentirnos perplejos cuando apliquemos esta propiedad:
Bien, ahora que sabemos lo que es posicionar y lo que es flotar, y sus diferencias, vamos a ver una de las aplicaciones más comunes: crear columnas.
Todos los desarrolladores web que desterramos las tablas para maquetar nos encontramos con el problema de cómo crear ahora columnas por medio de CSS.
Salvo unos pocos iluminados, el primer impulso de un principiante es posicionar las columnas. Ciertamente, es la forma más sencilla:
#cabecera{
height:90px;
background:#000 url(imagenes/cabecera_01.png) no-repeat;
padding:0;
}
#contenido_principal{
width:600px;
}
#contenido_secundario{
position:absolute;
top:120px;
left:600px;
width:300px;
border:1px solid #CCC;
background:#EEE;
}
Lo que hacemos es sacar el contenido secundario del flujo del documento para colocarlo en la posición lateral. Para empezar, dependemos de la altura de la cabecera, aunque ese suele ser el menor de los problemas si se trata de una imagen a la que hemos asignado un alto fijo. Tampoco es problema el valor que asigna a left, puesto que hemos fijado en ancho del contenido principal a un valor de 600 píxeles —aunque eso nos imposibilita elegir un diseño fluido, pero ahora no es esa nuestra intención—. Si vemos el resultado, en apariencia hemos conseguido nuestro objetivo.
Pero hay un problema serio. En el caso de que el estilo se aplique a una única página que controlásemos completamente con mano de hierro, podría mantenerse el diseño. Pero si los contenidos de ambas columnas son dinámicos, o según la sección hay mucha diferencia de amplitud, podría ocurrir que la columna posicionada de forma absoluta fuese más larga que la columna que se mantiene en el flujo normal. En tal caso, la columna se solapa con el pie, ya que no puede afectar a su posición al estar fuera del flujo del documento.
La solución, por tanto, no es reposicionar las capas, sino flotarlas. Como los elementos flotados siguen afectando —aunque a su manera particular— al flujo del documento, se pueden aprovechar para crear columnas. No obstante, como vamos a ver inmediatamente, se necesita aplicar la propiedad clear para lograr el efecto óptimo.
Usando el mismo código que para los ejemplos anteriores, aplico float al contenido principal y al secundario...
#contenido_principal{
width:600px;
float:left;
}
#contenido_secundario{
width:300px;
margin-top:20px;
float:left;
border:1px solid #CCC;
background:#EEE;
}
...y el resultado es un tanto desastroso.
¿Por qué? Porque, como hemos visto, los elementos flotados no afectan a la posición de los elementos posteriores. El primer elemento no posicionado con el que se encuentra el pie es la cabecera, así que se sitúa bajo ésta; pero su contenido si se ve afectado por los elementos flotados, así que se situa bajo el segundo, extendiendo el área total del párrafo.
Aquí es donde entra en juego clear, cuyos valores son:
left: No permite que existan elementos flotados a la izquierda del elemento al que se aplica, situándolo debajo.right: Igual, pero para el lado derecho.none: Permite que existan elementos flotados a ambos lados.both: Sitúa el elemento donde no tenga elemento alguno flotado a la derecha o a la izquierda.Visualmente se comprueba su funcionamiento en este ejemplo.
Eso es justo lo que necesitamos, añadir a la regla creada para el pie una línea más:
#pie{
clear:both;
padding:5px 0;
margin:0;
}
En apariencia, el resultado es el mismo que para el primer ejemplo de columnas creadas con position, pero ahora el flotado del contenido secundario afecta a la situación del pie, reposicionándolo si es necesario.
Además, flotar las columnas tiene la ventaja adicional de que nos permite crear un diseño fluido si lo deseamos.
En la anhelada especificación de CSS 3 —para el momento en que escribo— hay un módulo para columnas (inglés) que nos simplificará la vida. En este momento no tiene soporte directo, pero uno se puede hacer una idea de cómo funciona por medio de las extensiones -moz-column- en Mozilla o Firefox.
margin. img: en el código está el elemento, pero el contenido de la imagen está en el archivo que se incruste al representar el documento en un agente de usuario. Por su parte, los elementos no reemplazados son aquellos cuyo contenido sí está presente en el documento, como por ejemplo un párrafo. 
