En el estilo antiguo de CSS, solía ser difícil especificar la ubicación de los elementos dentro de una página. La única opción era utilizar tablas, que eran engorrosas y difíciles de usar. Ahora, se utilizan diseños “sin tablas”, lo que significa básicamente que las páginas web utilizan etiquetas HTML div junto con capas para establecer la posición de estos elementos. Los diseños sin tablas y las páginas con capas existen desde hace varios años, pero CSS ha ayudado a diseñar la ubicación y el tamaño dinámico de estos elementos. En este artículo, aprenderemos a trabajar con diseños sin tablas, elementos de posición, estilos flotantes, márgenes y relleno, y otros aspectos de la creación de diseños que se ajusten al ancho y alto de una página.
Cuando trabajes con diseños de páginas web, a menudo oirás hablar de CSS sin tablas. Hace años, las tablas se utilizaban para dar formato a los elementos de una página web. Se comenzaba con una tabla, y luego cada celda de la tabla contenía los elementos que se querían formatear. Las celdas de la tabla se establecían con una anchura, una altura y se daba a la tabla una posición dentro del contenedor de la tabla principal. Esto se volvió tedioso para los desarrolladores, y el diseño de la tabla se cambió por contenedores div.
En este artículo se utiliza el término “imagen” para indicar cualquier contenido que se pueda posicionar. El artículo también utilizará el término “div” para referirse a cualquier contenedor HTML que pueda ser posicionado, que generalmente es una etiqueta div pero también puede ser p u otra etiqueta que pueda contener contenido.
La imagen fija puede posicionarse en relación con los bordes de cualquier esquina de la ventana. Los bordes son arriba, izquierda, derecha y abajo. Las esquinas son superior e izquierda, superior y derecha, inferior e izquierda, e inferior y derecha. Especificando una distancia desde los dos bordes de cualquier esquina, la imagen puede posicionarse exactamente en cualquier lugar de la ventana.
La imagen de posición fija puede sangrar (término de la imprenta para las partes impresas que se recortan) utilizando un valor negativo al posicionarla. Para una página web, “sangrado” significa que parte de la imagen está más allá del borde de la ventana y se corta.
Este método colocará una imagen en la página web en la posición exacta respecto a la parte superior izquierda de la página o respecto a otro div posicionado. La imagen se elimina del flujo de contenido normal de la página web.
Artículo AccionesPosiciónLa propiedad CSS posición establece cómo se posiciona un elemento en un documento. Las propiedades top, right, bottom y left determinan la ubicación final de los elementos posicionados.PruebaSyntaxposition: static;
El elemento se posiciona según el flujo normal del documento, y luego se desplaza respecto a sí mismo en función de los valores de top, right, bottom y left. El desplazamiento no afecta a la posición de ningún otro elemento; por lo tanto, el espacio dado al elemento en el diseño de la página es el mismo que si la posición fuera estática.
El elemento se elimina del flujo normal del documento y no se crea ningún espacio para el elemento en el diseño de la página. Se posiciona en relación con su antecesor más cercano, si lo hay; de lo contrario, se coloca en relación con el bloque contenedor inicial. Su posición final viene determinada por los valores de arriba, derecha, abajo e izquierda.
El elemento se elimina del flujo normal del documento y no se crea ningún espacio para el elemento en el diseño de la página. Se posiciona en relación con el bloque contenedor inicial establecido por la ventana gráfica, excepto cuando uno de sus ancestros tiene una propiedad de transformación, perspectiva o filtro establecida a algo distinto de ninguno (véase la especificación de transformaciones de CSS), o la propiedad will-change está establecida a transformar, en cuyo caso ese ancestro se comporta como el bloque contenedor. (Tenga en cuenta que hay incoherencias en los navegadores con la perspectiva y el filtro que contribuyen a la formación del bloque contenedor). Su posición final está determinada por los valores de top, right, bottom y left.
Fíjate en el espacio donde normalmente habría estado div-1 si no lo hubiéramos movido: ahora es un espacio vacío. El siguiente elemento (div-after) no se ha movido cuando hemos movido div-1. Eso es porque div-1 sigue ocupando ese espacio original en el documento, aunque lo hayamos movido.
Fíjate en que esta vez, como el div-1a ha sido eliminado del documento, los demás elementos de la página se han posicionado de forma diferente: el div-1b, el div-1c y el div-after se han movido hacia arriba, ya que el div-1a ya no estaba allí.
Podemos “flotar” un elemento para empujarlo lo más lejos posible a la derecha o a la izquierda, y permitir que el texto lo envuelva. Esto se utiliza normalmente para las imágenes, pero lo utilizaremos para tareas de maquetación más complejas (porque es la única herramienta que tenemos).
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.