Antes de comezar...
Os navegadores crean e posicionan de forma automática todas as caixas que forman cada páxina HTML. Non obstante, CSS permite ao deseñador modificar a posición na que se mostra 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 doutra forma non serían posibles.
O estándar de CSS define cinco modelos diferentes para posicionar unha caixa:
- Posicionamento normal ou estático: trátase do posicionamento que utilizan os navegadores se non se indica o contrario.
- Posicionamento relativo: variante do posicionamento normal que consiste en posicionar unha caixa segundo o posicionamento normal e despois desprazala respecto da súa posición orixinal.
- Posicionamento absoluto: a posición dunha caixa establécese de forma absoluta respecto do seu elemento colector e o resto de elementos da páxina ignoran a nova posición do elemento.
- Posicionamento fixo: variante do posicionamento absoluto que converte unha caixa nun elemento inamovible, de forma que a súa posición na pantalla sempre é a mesma independentemente do resto de elementos e independentemente de se o usuario sobe ou baixa a páxina na ventá do navegador.
- Posicionamento flotante: trátase do modelo máis especial de posicionamento, xa que despraza as caixas todo o posible cara á esquerda ou cara á dereita da liña na que se encontran.