¿Qué es el posicionamiento?

El posicionamiento de hojas de estilos en cascada define la colocación de los elementos en una página web.

Posicionamiento predeterminado

De manera predeterminada, los elementos fluyen uno detrás de otro en el mismo orden en el que aparecen en el código fuente HTML. Cada elemento tiene un tamaño y una posición que depende del tipo de elemento, el contenido del elemento y el contexto de presentación para el elemento a medida que se representa en la página. Este modelo de flujo predeterminado para el diseño HTML no permite tener un gran control sobre la colocación de los elementos en la página. Mediante la aplicación de un conjunto pequeño de atributos de hoja de estilos en cascada a los elementos que se definen para la página, las hojas de estilos en cascada pueden controlar la posición precisa de los elementos ya que proporcionan las coordenadas exactas. También puede especificar la colocación con respecto a las posiciones de los demás elementos en la página.

Al igual que otras propiedades de hoja de estilos en cascada o HTML, los atributos de hoja de estilos en cascada que se usan para controlar la posición de un elemento están disponibles para scripting, que puede cambiar la posición de estos elementos en la página de forma dinámica. En consecuencia, se puede volver a calcular y dibujar la posición de estos elementos una vez cargado el documento, sin volver a cargar la página desde el servidor.

Puede usar distintas técnicas de diseño para controlar la posición de un elemento. Si usa parámetros específicos, tiene el control completo sobre lo que se muestra de un elemento en una página.

Posicionamiento de un elemento

El tipo de posicionamiento que se use dependerá del diseño del contenido y la finalidad del documento. Hay tres formas de posicionar un elemento con coordenadas x e y:

  • Posicionamiento absoluto    El elemento se coloca con precisión con respecto al sistema de coordenadas del elemento primario, independientemente de cualquier otro contenido.

  • Posicionamiento fijo    El elemento se coloca con precisión con respecto a la ventana del explorador, fuera del flujo del resto del contenido.

  • Posicionamiento relativo    El elemento se coloca con respecto a los demás elementos de la página. El posicionamiento relativo depende del flujo predeterminado del documento y cambia el flujo del contenido cuando el usuario cambia el tamaño de la ventana del explorador.

[!NOTA]

Si usa Internet Explorer 6 o una versión posterior, le recomendamos que establezca !DOCTYPE en el modo estricto de modo que cumpla con lo establecido sobre representación en la especificación W3C para Cascading Style Sheets (CSS), Level 2, revision 1 (CSS2.1) Ee371282.xtlink_newWindow(es-es,Expression.40).png (Hojas de estilos en cascada (CSS), nivel 2, revisión 1 (CSS2.1), de la siguiente forma:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Vea también

Conceptos

Posicionamiento absoluto
Posicionamiento fijo
Posicionamiento relativo