Saltar navegación

Posicionamento

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.