Lo que se conoce como "CSS positioning" no es sino uno de los subgrupos de propiedades definidas por el World Wide Web Consortium para las hojas de estilo en cascada, nivel 1 (Cascade Style Sheets, CSS1), subgrupo que por su particular importancia ha adquirido cierta autonomía. Su definición oficial fue objeto de un borrador publicado por el W3C el 19 de agosto de 1997, no con carácter de propuesta formal, sino para fomentar la experimentación en este campo. La formulación puedes verla en inglés
aqui, aunque actualmente se ha refundido en la recomendación CSS 2.
El posicionamiento con CSS permite, en síntesis, máximo control sobre el lugar que cada elemento de una página Web ocupará dentro de la propia página, sus condiciones de visibilidad y "flotabilidad", asi como manejo de capas.
Propiedades disponibles en CSS1
En el posicionamiento con CSS participan nueve propiedades:
CSS Positioning: propiedades
| Propiedad | Descripción | Valores posibles | Se aplica a: |
| position | Permite posicionar el elemento | absolute relative static | Elementos:todos |
| left | Posición izquierda de elemento | length | percentage | auto | Elementos posicionados absoluta o relativamente |
| top | Parte superior del elemento | length | percentage | auto | Elementos posicionados absoluta o relativamente |
| height | Altura del elemento | length | auto | DIV, SPAN y replaced elements |
| width | Anchura del elemento | length | percentage | auto | DIV, SPAN y replaced elements |
| visibility | Controla la visibilidad | visible | hidden | inherit | Elementos: todos |
| z-index | Control de capas | auto | numero (1,2,3) | Elementos posicionados absoluta o relativamente |
| clip | Define el área visible del elemento | forma (rect...) | auto | Elementos:todos |
| overflow | Especifica el comportamiento de superposición | visible | hidden | scroll | auto | Elementos:todos |
Antes de examinar cada una de las propiedades, es preciso sentar algunas convenciones terminológicas relacionadas con la estructura jerárquica de un documento HTML.
La etiqueta <BODY> ocupa el lugar mas alto en la jerarquía del documento, en cuanto encierra dentro todas las demas etiquetas.
Decimos que un elemento es
child (hijo) de otro si está anidado (dentro) de la pareja de etiquetas de otro elemento. El elemento que incluye o encierra al elemento child es el
parent (padre).
Se dice
Sibling de los elementos que comparten el mismo antecesor. Y
elemento previo es el elemento que inmediatamente precede a otro en el archivo origen, independientemente de que sea o no parent, child, etc.
El
origen de un elemento es donde se localizan las coordenadas 0,0, de su esquina superior izquierda. Cada elemento tiene su propio origen, que depende del valor de su posición y de su localización en la jerarquia de elementos.
Por
flow o flujo del documento nos referimos a la forma en que su contenido "fluye" dentro de la ventana del navegador; que puede cambiar o no dependiendo del valor de ciertas propiedades. El flujo
normal de un documento es en horizontal, de derecha a izquierda.
Un
elemento reemplazado es aquel del que solo se conocen las dimensiones intrínsecas como img, input, textarea, select y object
La tabla anterior incluye las propiedades relativas al posicionamiento de las CSS1; el posicionamiento de bloques y elementos es aun mas versátil con CSS 2.1.
En CSS2.1, una caja puede ser presentada de acuerdo a tres esquemas de posicionamiento:
- Flujo normal En CSS2.1, el flujo normal incluye formato de bloque, formatos en línea, posicionamiento relativo, y posicionamiento de cajas "run-in".
- Flotantes. En el modelo flotante, una caja se presenta primero de acuerdo al flujo normal, luego se saca del flujo normal y se mueve a la izquierda o derecha tanto como sea posible. El contenido restante puede fluir a lo largo del costado del elemento flotante.
- Posicionamiento absoluto. En el modelo de posicionamiento absoluto, una caja es quitada completamente del flujo normal (no tiene ningún impacto sobre los hermanos siguientes) y se le asigna una posición con respecto al bloque de contención.
A continuación veremos con mas detalles las propiedades de posicionamiento CSS
Propiedad Position
La propiedad
position admite cinco valores:
absolute ,
relative ,
static ,
fixed y
inherit. Por defecto es
static .
position: static
La posición static es el valor por defecto de todos los elementos HTML, y por tanto no hace falta especificar este estilo.
Los elementos en posición estatica se van dibujando uno a continuación de otro, segun las reglas ordinarias, fluyendo con la página.
position: absolute
Los elementos "absolutamente" posicionados dentro de un documento HTML (y tambien los elementos "children" que engloba) no forman parte del fluir general del resto de elementos del documento. Su posición es asignada independientemente de la que ocupen el resto de los elementos del documento.
Por defecto, el contenido de una pagina (por ejemplo los bloques de texto de cada párrafo) se adapta automáticamente al tamaño de la ventana, alargando o acortando las líneas, etc, colocando un párrafo detrás de otro, segun se va leyendo el archivo, acomodándo entre si los distintos elementos que integran el documento. A esta adaptabilidad llamamos fluir (flow), o flujo html.
Pues bien, los elementos posicionados de forma absoluta no fluyen con los demás, colocándose de forma independiente, incluso superponiendose a otros elementos. Los elementos de este tipo, por ello, se consideran
fuera del flujo HTML, en cuanto a que pueden colocarse en cualquier sitio del documento, independientemente de su situación en el código fuente
La posición de los elementos absolutos se fija determinando su coordenadas, dadas por los atributos top y left (y en CSS2 además, right y bottom).
Al indicar el origen con las coordenadas top y left, estamos estableciendo el punto de ubicación de la esquina superior izquierda de la caja que contiene el elemento.
Si nuestro elemento absoluto no está contenido dentro de ningun otro, la posición de las coordenadas se mide respecto del inicio de la etiqueta BODY (contenedor principal). Si nuestro elemento absoluto está contenido dentro de otro elemento, y este elemento contenedor está posicionado absoluta o relativamente, las coordenadas del elemento absoluto "contenido" se calculan desde el origen de su elemento contenedor.
Veamos ejemplos de cálculo del origen de elementos posicionados absolutamente:
Elemento posicionado absolutamente, con elemento parent static
<span style="position:static; background-color:green"> static green parent static green parent static green parent static <span style="position:absolute; top:60px; left:60px; background-color:blue"> absolute blue child absolute blue child absolute blue child absolute </span> </span>
Nuestro elemento azul (absoluto) ignora al elemento contenedor, de posición static, y fijará sus coordenadas en relación a la etiqueta BODY.
Elemento con posición absoluta, con elemento parent posicionado relativamente
<SPAN STYLE="position:relative; background-color:#90EE90"> relative green parent relative green parent relative green parent <SPAN STYLE="position:absolute; top:60px; left:60px; background-color:#ADD8E6"> absolute blue child absolute blue child absolute blue child </SPAN> </SPAN>
Aqui el elemento azul, absoluto, fijaría sus coordenadas en relación al origen del elemento verde, relativo. El elemento verde precisamente por venir posicionado relativamente, ocupa su propio lugar en el flujo del documento.
Elemento posicionado absolutamente, con elemento parent posicionado absolutamente.
<SPAN STYLE="position:absolute; background-color:#90EE90"> absolute green parent absolute green parent absolute green parent <SPAN STYLE="position:absolute; top:60px; left:60px; background-color:#ADD8E6"> absolute blue child absolute blue child absolute blue child </SPAN> </SPAN>
Como en el caso anterior, el elemento azul fija sus coordenadas en relación al origen del elemento verde (absoluto)
Y en los tres casos, nuestro elemento posicionado absolutamente permanecerá en el mismo lugar, aunque se redimensione la ventana, no importa de que forma fluyan otros elementos, a los que se superpondrá si es preciso.
Si se omite la propiedad top, o se le asigna valor
auto, la parte mas superior de nuestro elemento absoluto comenzará en lo alto de la última línea de texto del elemento parent, si es texto, o alineado con la parte mas superior del elemento parent, si es una imagen. Si la propiedad left es omitida, el elemento se posicionará a la izquierda, al final de la última linea de texto del elemento parent, si es texto, o al final de la parte derecha del elemento parent, si es una imagen.
Cuatro ejemplos con elemento parent texto:
elemento posicionado relativamente sin valores top ni left:
<SPAN STYLE="position:relative; background-color:#90EE90"> relative green parent relative green parent green parent relative green parent relative <SPAN STYLE="position:absolute; background-color:#ADD8E6">Absolute blue child sin top ni left </SPAN> </SPAN>
En este ejemplo, al no venir determinadas las propiedades left y top, el origen de nuestro elemento absoluto (azul) es al final del elemento parent (verde). Sin embargo, como el elemento parent fluye cuando cambia la ventana del navegador, el origen del elemento absoluto puede ser variable.
elemento posicionado con valores top y left.
<SPAN STYLE="position:relative; background-color:#90EE90"> relative green parent relative elative green parent relative green parent relative green parent <SPAN STYLE="position:absolute; top:10px; left:50px;background-color:#ADD8E6"> Absolute blue child con top:10px y left:50px. </SPAN> </SPAN>
En este ejemplo sí determinamos las propiedades top y left de nuestro elemento absoluto. Por eso su origen no se moverá, aunque redimensionemos la ventana.
Elemento posicionado absolutamente, fijado unicamente un valor top
<SPAN STYLE="position:relative;background-color:#90EE90"> relative green parent relative green parent relative green parent relative <SPAN STYLE="position:absolute; top:10px;background-color:#ADD8E6"> Absolute blue child con top:10px. </SPAN> </SPAN>
En este ejemplo solo determinamos la propiedad top. Esto significa que el valor top del origen nunca variará, el elemento azul siempre comenzará 10 pixels desde la parte superior de su (no static) parent. Pero el valor left es auto, por lo que se refiere al final del elemento parent. Por eso si se estrecha la ventana del navegador, la parte izquierda del rectangulo de nuestro elemento absoluto se moverá.
Elemento posicionado absolutamente, fijado unicamente su valor left
<SPAN STYLE="position:relative;background-color:#90EE90"> relative green parent relative green parent relative green parent relative green parent relative green parent relative green parent relative green parent <SPAN STYLE="position:absolute; left:50px;background-color:#ADD8E6"> Absolute blue child con left:50px. </SPAN> </SPAN>
Al contrario que en el ejemplo anterior, el lado izquierdo del elemento permanecerá fijo a 50 pixels, mientras que la parte superior variará dependiendo de la situación del final del elemento parent.
position: relative
Los elementos posicionados relativamente, a diferencia de los anteriores, forman parte del fluir del documento. El origen de un elemento posicionado relativamente es el final del elemento previo en el flujo (en el flujo, no en el codigo fuente) independientemente de su relación jerárquica.
Para elementos con
posición relativa , el origen de coordenadas es la posición "natural" que tendrían de no estar posicionados, en lugar de la esquina del elemento contenedor en la página.
Los tres ejemplos siguientes se visualizan igual; siendo elementos posicionados relativamente, sin propiedades top y left asignadas, se limitan a fluir uno detrás del otro, independientemente de su posición jerárquica
tres elementos del mismo nivel, posicionados relativamente
<SPAN STYLE="position:relative; background-color:#90EE90"> Green relative element. </SPAN> <SPAN STYLE="position:relative; background-color:#ADD8E6"> Blue relative element.</SPAN> <SPAN STYLE="position:relative; background-color:#FFB6C1"> Red relative element.</SPAN>
tres elementos anidados, posicionados relativamente
<SPAN STYLE="position:relative; background-color:#90EE90"> Green relative element. <SPAN STYLE="position:relative; background-color:#ADD8E6"> Blue relative child of green. <SPAN STYLE="position:relative; background-color:#FFB6C1"> Red relative child of blue. </SPAN> </SPAN> </SPAN>
tres elementos posicionados relativamente; el segundo, child del primero
<SPAN STYLE="position:relative; background-color:#90EE90"> Green relative element. <SPAN STYLE="position:relative; background-color:#ADD8E6"> Blue relative child of green. </SPAN> </SPAN> <SPAN STYLE="position:relative; background-color:#FFB6C1"> Red relative element. </SPAN>
El siguiente ejemplo demuestra como un elemento posicionado absolutamente no es parte del flujo del documento. El elemento azul está entre dos elementos posicionados relativamente en el codigo fuente, pero no afecta al flujo de ninguno de los dos. Si redimensionamos la ventana, el elemento azul permanece en la misma posición y el elemento rojo sigue al verde
Relativo, absoluto, relativo
<SPAN STYLE="position:relative; background-color:#90EE90"> green relative element green relative element green </SPAN> <SPAN STYLE="position:absolute; top:50px; left:50px; background-color:#ADD8E6"> Blue absolute element with top:50px and left:50px. </SPAN> <SPAN STYLE="position:relative; background-color:#FFB6C1"> red relative element red relative element red relative element </SPAN>
El siguiente ejemplo es similar salvo que el elemento azul, posicionado absolutamente, tiene un elemento child. El elemento azul y su child estan fuera del fluir del documento y el rojo sigue al verde.
Relativo, absoluto con child relativo, relativo
<SPAN STYLE="position:relative; background-color:#90EE90"> green relative element green relative element green relative </SPAN> <SPAN STYLE="position:absolute; top:50px; left:50px; background-color:#ADD8E6"> Blue absolute element with top:50px and left:50px. <SPAN STYLE="position:relative; background-color:#FFFFFF"> White relative child of blue. </SPAN> </SPAN> <SPAN STYLE="position:relative; background-color:#FFB6C1"> red relative element red relative element red relative element</SPAN>
Pensemos que tenemos un elemento posicionado relativamente, y hemos asignado sus propiedades top y/o left. Otro elemento posicionado relativamente que le siga inmediatamente el el flujo HTML calculará su origen como sigue:
- Si el siguiente elemento es un child del primer elemento, el origen de este siguiente elemento estará al final del primer elemento.
- Si el siguiente elemento no es un child del primer elemento, este elemento siguiente tendrá su origen en donde el primer elemento tendría su fin de no haberse fijado sus propiedades letf o top
tres elementos posicionados relativamente, del mismo nivel.
<SPAN STYLE="position:relative; background-color:#90EE90"> Green relative element. </SPAN> <SPAN STYLE="position:relative; top:20px; background-color:#ADD8E6"> Blue relative element with top:20px. </SPAN> <SPAN STYLE="position:relative; background-color:#FFB6C1"> Red relative element. </SPAN>
En este ejemplo el elemento azul esta offset 20 pixels respecto a su posición natural. Y como el siguiente elemento rojo no es child del anterior, es colocado al final de donde el elemento azul debería haber naturalmente estado sino hubieramos fijado un valor top.
tres elementos posicionados relativamente, anidados
<SPAN STYLE="position:relative; background-color:#90EE90"> Green relative element. <SPAN STYLE="position:relative; top:20px;background-color:#ADD8E6"> Blue relative child of green with top:20px. <SPAN STYLE="position:relative; background-color:#FFB6C1"> Red relative child of blue. </SPAN> </SPAN> </SPAN>
este ejemplo muestra lo que sucede ahora que el elemento rojo es child del azul. La posición del elemento azul ha sido alterada, y el elemento rojo se visualiza al final de donde está ahora el elemento azul.
position: fixed
El posicionamiento fijo (fixed) es una subcategoría del posicionamiento absoluto. La posición de la caja es calculada de acuerdo al modelo 'position:absolute', pero además, la caja se fija con respecto a alguna referencia de la pantalla. La única diferencia con el posicionamiento absoluto es que su posición respecto del bloque de contención es establecido por el acceso visual (pantalla, pagina impresa etc). Para los medios continuos (pantallas), los bloques en posición fixed no se mueven cuando el documento es desplazado. En este aspecto, son similares a las imágenes de fondo fijas, y son utiles para establecer cabeceras o pies de página. Para los medios paginados, los bloques con posiciones fijas (fixed) son repetidos en cada pagina. Esto resulta útil para poner, por ejemplo, una firma al pie de cada página.
width y height
Ya hemos dicho que el elemento posicionado absolutamente define un nuevo rectángulo de flujo para él y sus elementos child.
Este rectangulo comienza en la esquina superior izquierda del elemento. Se pueden definir las propiedades
width y
height del elemento. Si la propiedad width no es definida, el rectangulo se expande hasta el lado derecho de la ventana del navegador. Si la propiedad width esta definida, se mantendrá incluso aunque el ancho del rectángulo vaya mas allá de la ventana del navegador.
Si no esta definida la propiedad height, el rectángulo se expandirá hacia abajo tanto como sea necesario para visualizar el contenido.
Hacemos notar que el comportamiento descrito para el caso de no definir el valor de las propiedades width y height es el comportamiento por defecto del navegador. Este comportamiento puede ser alterado fijando la propiedad overflow, que será vista mas tarde.
Elemento posicionado absolutamente sin definir valores width o height
<SPAN STYLE="position:relative;background-color:#90EE90"> Relative green parent. <SPAN STYLE="position:absolute; top:50px; left:50px;background-color:#ADD8E6"> absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child absolute blue absolute blue child </SPAN> </SPAN>
Este ejemplo muestra un elemento posicionado absolutamente, sin propiedades widht y height.
Al estrechar la ventana del navegador, el rectángulo que contiene al elemento azul ocupa siempre el espacio hasta la derecha, extendiendose hacia abajo si es necesario.
Elemento posicionado absolutamente con widht definido
<SPAN STYLE="position:relative;background-color:#90EE90"> Relative green parent. <SPAN STYLE="position:absolute; top:50px; left:50px; width:200px; background-color:#ADD8E6"> absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child </SPAN> </SPAN>
Este ejemplo demuestra es uso de la propiedad width. En este caso la anchura del elemento azul permanece igual, independientemente del tamaño de la ventana.
Hablamos antes de que un elemento posicionado absolutamente y sus elementos child forman un rectángulo que no fluye con el resto de la página. El siguiente ejemplo lo ilustra. El rectángulo azul define su origen a 50,50 y la anchura a 250 pixels.
Como no se ha fijado un valor height, el rectángulo se extenderá hacia abajo lo que sea necesario. El elemento posicionado absolutamente tiene a su vez un elemento child posicionado relativamente, y puede verse como fluye tras el elemento azul, pero siempre entre los límites izquierdo y derecho definidos por el rectángulo.
Elemento posicionado absolutamente, con elemento child relativo.
<SPAN STYLE="position:relative;background-color:#90EE90"> Relative green parent. <SPAN STYLE="position:absolute; top:50px; left:50px; width:250px; background-color:#ADD8E6"> absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child absolute blue child <SPAN STYLE="position:relative;background-color:#FFB6C1"> relative red child relative red child relative red child relative red child relative red child relative red child </SPAN> </SPAN> </SPAN>
Propiedad Visibility
La propiedad visibility de un elemento controla si este será visualizado o no, según la fijemos en
visible o
hidden. Aunque el elemento no sea visible, continúa ocupando su espacio en el fluir del documento. Es decir, al contrario de lo que ocurría con la propiedad display (incluida dentro de las propiedades de Clasificación): si la propiedad display se fija en none, el espacio que debería ocupar este elemento es reutilizado.
Propiedad Clip
La propiedad clip permite decidir que parte de un elemento será visible. No afecta al espacio ocupado por el elemento en el flujo HTML.
ejemplo de propiedad clip:
El ejemplo muestra la sintaxis para determinar la zona visible, usando reglas de estilo in line, o scripts. El orden de los parámetros ha de ser: top, right, bottom, left:
Inline style sheet
<IMG ID=Olivia1 STYLE="position:absolute; top:0px; left:0px; width:136px; height:228px; clip:rect(0 136 228 0)" SRC=olivia1.gif>
Script
Olivia1.style.clip = "rect(0 136 228 0)"
Propiedad Overflow
La propiedad
overflow permite elegir lo que sucede con el contenido de un elemento cuando este no encaja o coincide con el rectángulo definido por alguna de las propiedades
top ,
left ,
height y
width . Son cuatro posibles valores para esta propiedad:
- Visible -- Expande el tamaño del elemento hasta dar encaje a todo el contenido. Es el valor por defecto.
- Hidden -- Ajusta el tamaño del contenido al declarado del elemento.
- Auto -- Coloca barras de scroll en el elemento solo si su contenido excede del tamaño fijado.
- Scroll -- Coloca barras de scroll independientemente del tamaño del elemento.
ejemplo de overflow
<DIV STYLE="position:absolute; top:60px; left:0px; width:100px; height:100px; overflow:visible; background-color:white"> Esto es corto </DIV> <DIV STYLE="position:absolute; top:60px; left:200px; width:100px; height:100px; overflow:visible; background-color:white"> Este es largoooooooooo </DIV>
Propiedad Z-Index
Si por razón de haber definido algun elemento con posicion absoluta, este ha de visualizarse en el mismo lugar ocupado por otro elemento, se produce una superposición de elementos, visualizandose, en la parte coincidente, solo el que ocupa la posición o capa superior. Por defecto, los elementos se apilan en el orden en que aparecen: el elemento situado mas tarde en el archivo origen quedará arriba.
La propiedad z-index permite especificar el
z-orden de los elementos, esto es, el orden de apilamiento en capas del documento.
Los elementos con mayor Z-INDEX son colocados encima de los que tengan menor Z-INDEX , quedando estos últimos tapados por los primeros.
Sólo se permiten valores enteros positivos para este parámetro.
Posicionamiento dinámico
Cualquier elemento posicionado absoluta o relativamente, puede ajustar dinámicamente su posición mediante scripts; esto permite crear animaciones para todos los elementos que admitan tales posicionamientos.
Se trata simplemente ("simplemente", digo) de manipular los valores top y left mediante un script, que controla secuencialmente el desplazamiento del elemento, incrementando o reduciendo dichos valores.
El DHTML sin embargo excede de esta introducción.
