Posicionamento CSS

Posicionamiento e visualización

Os navegadores aplican un procesamiento moi complexo do contido HTML e CSS das páxinas web antes de amosalas na pantalla.

Para cumplir co modelo de caixas presentado no capítulo anterior, os navegadores crean unha caixa para representar a cada elemento da páxina HTML. Os factores que se teñen en conta para xenerar cada caixa son:

• As propiedadeses width e height da caixa (de estar establecidas)
• O tipo de cada elemento HTML (elemento de bloque ou elemento en liña)
• Posicionamiento da caixa (normal, relativo, absoluto, fixo ou flotante)
• As relacións entre elementos (onde se atopa cada elemento, elementos descendeentes, etc.)
• Outro tipo de información, coma por exemplo o tamaño das imaxes e o tamaño da fiestra do navegador

Veremos os cinco tipos de posicionamentos definidos para as caixas e outras propiedades que afectan o xeito no que se visualizan as caixas.

Tipos de elementos

El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque.

Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Debido a este comportamiento, el tipo de un elemento influye de forma decisiva en la caja que el navegador crea para mostrarlo. La siguiente imagen muestra las cajas que crea el navegador para representar los diferentes elementos que forman una página HTML:

El primer elemento de la página anterior es un párrafo. Los párrafos son elementos de bloque y por ese motivo su caja empieza en una nueva línea y llega hasta el final de esa misma línea. Aunque los contenidos de texto del párrafo no son suficientes para ocupar toda la línea, el navegador reserva todo el espacio disponible en la primera línea.

El segundo elemento de la página es un enlace. Los enlaces son elementos en línea, por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos. Si después de este elemento se incluye otro elemento en línea (por ejemplo otro enlace o una imagen) el navegador mostraría los dos elementos en la misma línea, ya que existe espacio suficiente.

Por último, el tercer elemento de la página es un párrafo que se comporta de la misma forma que el primer párrafo. En su interior, se encuentra un enlace que también se comporta de la misma forma que el enlace anterior. Así, el segundo párrafo ocupa toda una línea y el segundo enlace sólo ocupa el espacio necesario para mostrar sus contenidos.

Por sus características, los elementos de bloque no pueden insertarse dentro de elementos en línea y tan sólo pueden aparecer dentro de otros elementos de bloque. En cambio, un elemento en línea puede aparecer tanto dentro de un elemento de bloque como dentro de otro elemento en línea.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

Los siguientes elementos también se considera que son de bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script.

Posicionamento

Os navegadores crean e posicionan de forma automática todas as caixas que forman cada páxina HTML; mais CSS permite ó deseñador modificar a posición na que se amosa cada caixa.

Utilizando as propiedades que proporciona CSS para alterar a posición das caixas é posible realizar efectos moi avanzados e deseñar estruturas de páxinas que de outra forma non serían posibles.

Posicionamento CSS

O estándar de CSS define cinco modelos diferentes para posicionar unha caixa:

Posicionamiento normal ou estático

Trátase do posicionamento que utilizan os navegadores se non se indica o contrario.

Posicionamiento relativo

Variante do posicionamento normal: Posiciona unha caixa segundo o posicionamiento normal e despois é desplazarada respecto da súa posición orixinal.

Posicionamiento absoluto

A posición dunha caixa establécese de forma absoluta respecto do seu elemento contedor e o resto de elementos da páxina ignoran a nova posición do elemento

Posicionamiento fixo

Variante do posicionamiento absoluto: Convirte unha caixa nun elemento inamovible, de forma que a súa posición na pantalla sempre é a mesma independentemente do resto de elementos e de se o usuario sube ou baixa a páxina na fiestra do navegador.

Posicionamiento flotante

modelo máis especial de posicionamiento: despraza as caixas todo o posible hacia a esquerda ou dereita da liña na que se atopan.

Veremos máis en detalle cada un deles no artigo de Posicionamento CSS.

Posicionamento das caixas

O posicionamiento duhna caixa establécese mediante a propiedade position, que pode ter os seguintes valores:

• static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.
• relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.
• absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.
• fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.

A propiedade position no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada float y que se explica más adelante. Además, la propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza.

Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas:

No caso do posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.

En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades right y left) o altura (propiedades top y bottom) del elemento.