Elementos de posicionamiento en una página web con la propiedad de posición CSS

Abril 24, 2024

Antes de las hojas de estilo en cascada, tenía un control limitado sobre la posición de los objetos en su página web. Podría usar la tabla HTML para controlar ligeramente el posicionamiento, pero esto no fue muy preciso. Ahora con CSS, puede tener un control preciso sobre cómo se coloca cada elemento en su página web.

Antes de que pueda usar la propiedad de posición CSS para posicionar elementos en su página web, necesitamos analizar la terminología utilizada para comunicarse con el navegador web. CSS no solo considera el ancho y alto de su página web, sino también las dimensiones del navegador web.

Ancho y altura del navegador
Al principio, puede pensar que esto se refiere a la ventana abierta del navegador. Pero realmente se refiere a todo el navegador, incluidos los controles y botones.
Ancho y altura en vivo
Este es el término para el área de visualización del navegador. No incluye los controles.
Ancho y altura del documento
Este es todo el ancho y alto de su página web. Si estas dimensiones son más grandes que el ancho y la altura de Live, el navegador mostrará barras de desplazamiento según sea necesario.

Ahora que conoce los términos para los límites en los que puede colocar las partes de su página web usando CSS, echemos un vistazo a los cuatro valores de posición.

Estático
Este es el valor predeterminado. A menos que especifique lo contrario para un elemento, el navegador utilizará un posicionamiento estático. Tal como suena, con el posicionamiento estático no puede reposicionar elementos en la página web. Entonces, ¿cómo determina el navegador dónde colocar cada objeto en su página web? Posiciona cada elemento en el orden en que aparecen en su código HTML. Si tiene una imagen de logotipo, luego un saludo y luego el aviso de copyright en su HTML, el navegador los colocará en la página web en ese orden. No puede mover el saludo sobre la imagen del logotipo.
Relativo
El posicionamiento relativo funciona igual que el estático, ya que el orden de los elementos en el código HTML controla el flujo de los elementos en la página. Sin embargo, puede utilizar el posicionamiento relativo para controlar la posición de un elemento en relación con los otros elementos en la página web.
Absoluto
Cuando utiliza el posicionamiento absoluto con un elemento, esto hará que ese elemento sea independiente del resto de la página web. Debido a que su ubicación ya no está determinada por el orden del HTML, deberá usar las coordenadas X e Y para colocar el elemento.
Fijo
Esto funciona igual que el posicionamiento absoluto. Sin embargo, el elemento que tiene un posicionamiento fijo no se desplazará con la página web. Esta es una buena característica para usar para un logotipo o menú que desea permanecer visible a medida que la página se desplaza hacia arriba.

Instrucciones De Vídeo: Posicionamiento de cajas - propiedad position CSS (Abril 2024).

Posicionar elementos en una página web con la propiedad de posición CSS, HTML, CSS, propiedad de posición CSS, posicionamiento estático, posicionamiento relativo, posicionamiento absoluto, posicionamiento fijo, cómo posicionar elementos en una página web, usar CSS para posicionar elementos en una página web

Artículo Anterior

Artículo Siguiente

Kengo Legend of the 9

Abril 2024

Kengo, un juego de lucha con espadas samurai bastante simple, no tiene mucho en términos de diseño o características. En gran parte desprovisto de contenido, Kengo palidece en comparación con los...

ordenadores

Calendarios 2013 imprimibles gratis

Abril 2024

Dicen que a medida que envejeces el tiempo pasa más rápido y cuanto más viejo me vuelvo más cierto, parece ese adagio. El año pasado pareció volar a gran velocidad. Al finalizar el 31 de diciembre de...