CSS Posición

La propiedad de Posición (Positioning) de CSS permite la ubicación de elementos.

CSS Posición y Flotamiento

CSS proporciona algunas propiedades para la posición y el flotamiento, que permiten establecer diseños en columna, superponer partes del diseño entre sí y completar tareas que tradicionalmente requerían múltiples tablas a lo largo de los años.

La idea básica de la posición es muy sencilla, permite definir la posición en la que debe aparecer el cuadro del elemento en relación con su posición normal, o en relación con el elemento padre, otro elemento o incluso la propia ventana del navegador. Obviamente, esta función es muy poderosa y sorprendente. Debe entenderse que la soporte del agente de usuario para la posición en CSS2 es mucho mayor que el de otros aspectos, por lo que no debe sorprender.

Por otro lado, CSS1 introdujo por primera vez el flotamiento, basado en una función añadida por Netscape en los inicios del desarrollo de la Web. El flotamiento no es completamente una posición fija, sin embargo, también no es un diseño de flujo normal. Explicaremos más a fondo el significado del flotamiento en los capítulos posteriores.

Todo es un cuadro

Los elementos div, h1 o p a menudo se denominan elementos de bloque. Esto significa que estos elementos se muestran comoUn contenidoes decir, 'cuadro de bloque'. Por el contrario, elementos como span y strong se denominan 'elementos en línea', porque su contenido se muestra en una línea, es decir, en un 'cuadro en línea'.

Puede usar Atributo displayCambiar el tipo de cuadro generado. Esto significa que al establecer el atributo display en block, se puede hacer que los elementos en línea (como el elemento <a>) se comporten como elementos de bloque. También se puede establecer display en none para que el elemento generado no tenga cuadro. En este caso, el cuadro y todo su contenido ya no se mostrarán, y no ocuparán espacio en el documento.

Pero en una situación, incluso sin una definición explícita, se crea un elemento de bloque. Esta situación ocurre cuando se agregan algunos textos al principio de un elemento de bloque (como div). Incluso si no se definen estos textos como párrafos, se tratarán como párrafos:

<div>
textos
<p>Más texto.</p>
</div>

En este caso, este cuadro se llama cuadro de bloque sin nombre, porque no está asociado con un elemento definido explícitamente.

Las líneas de texto de los elementos de bloque también experimentarán un efecto similar. Supongamos que hay un párrafo que contiene tres líneas de texto. Cada línea de texto forma un cuadro sin nombre. No se puede aplicar estilos directamente a los bloques sin nombre o a los cuadros de línea, porque no hay un lugar donde aplicarlos (notar que el cuadro de línea y el cuadro en línea son conceptos diferentes). Sin embargo, esto ayuda a entender que todo lo que se ve en la pantalla forma algún tipo de cuadro.

Mecanismo de posicionamiento CSS

CSS tiene tres mecanismos básicos de posicionamiento: flujo normal, flotación y posicionamiento absoluto.

A menos que se especifique explícitamente, todos los cuadros se posicionan en el flujo normal. Esto significa que la posición de los elementos en el flujo normal se determina por la posición del elemento en (X)HTML.

Los cuadros de bloque se alinean uno detrás de otro de arriba a abajo, y la distancia vertical entre los cuadros se calcula a partir del margen vertical externo.

Los cuadros de línea en línea se disponen horizontalmente en una línea. Se puede ajustar el espacio entre ellos utilizando el margen interno horizontal, el borde y el margen externo. Sin embargo, el margen interno vertical, el borde y el margen externo no afectan la altura del cuadro de línea. El cuadro horizontal formado por una línea se llamaCuadro de línea (Line Box)La altura del cuadro de línea siempre es suficiente para contener todos los cuadros de línea en línea que contiene. Sin embargo, el ajuste de la altura de la línea puede aumentar la altura de este cuadro.

En los siguientes capítulos, le explicaremos detalladamente la posicionamiento relativo, absoluta y flotante.

Atributo position de CSS

Al usar Propiedad positionPodemos elegir 4 tipos diferentes de posicionamiento, lo que afectará la forma en que se genera el cuadro del elemento.

El significado del valor de la propiedad position:

static
El cuadro de elemento se genera normalmente. Los elementos de bloque generan un cuadro rectangular, que forma parte del flujo del documento, mientras que los elementos en línea crearán uno o más cuadros de línea, colocados dentro del elemento padre.
relative
El contenedor de elementos se desplaza una cierta distancia. El elemento sigue manteniendo su forma antes de la ubicación, y el espacio que ocupaba originalmente se mantiene.
absolute
El contenedor de elementos se elimina completamente del flujo del documento y se ubica en relación con su contenedor. El contenedor puede ser otro elemento del documento o el contenedor inicial. El espacio que ocupaba el elemento en el flujo normal se cerrará, como si el elemento no hubiera existido. Después de la ubicación, se genera un contenedor de nivel bloque, sin importar qué tipo de contenedor generaba originalmente en el flujo normal.
fixed
El contenedor de elementos se comporta de manera similar a cuando se establece position en absolute, aunque su contenedor es la ventana herself.

Consejo:La ubicación relativa se considera realmente como parte del modelo de ubicación del flujo normal, porque la posición del elemento es relativa a su posición en el flujo normal.

Ejemplo

Ubicación: Ubicación relativa
Este ejemplo muestra cómo ubicar un elemento en relación con su posición normal.
Ubicación: Ubicación absoluta
Este ejemplo muestra cómo ubicar un elemento usando valores absolutos.
Ubicación: Ubicación fija
Este ejemplo muestra cómo ubicar un elemento en relación con la ventana del navegador.
Establecer el borde superior de la imagen usando valores fijos
Este ejemplo muestra cómo establecer el borde superior de la imagen usando valores fijos.
Establecer el borde superior de la imagen usando porcentajes
Este ejemplo muestra cómo establecer el borde superior de la imagen usando porcentajes.
Establecer el borde inferior de la imagen usando valores en píxeles
Este ejemplo muestra cómo establecer el borde inferior de la imagen usando valores en píxeles.
Establecer el borde inferior de la imagen usando porcentajes
Este ejemplo muestra cómo establecer el borde inferior de la imagen usando porcentajes.
Establecer el borde izquierdo de la imagen usando valores fijos
Este ejemplo muestra cómo establecer el borde izquierdo de la imagen usando valores fijos.
Establecer el borde izquierdo de la imagen usando porcentajes
Este ejemplo muestra cómo establecer el borde izquierdo de la imagen usando porcentajes.
Establecer el borde derecho de la imagen usando valores fijos
Este ejemplo muestra cómo establecer el borde derecho de la imagen usando valores fijos.
Establecer el borde derecho de la imagen usando porcentajes
Este ejemplo muestra cómo establecer el borde derecho de la imagen usando porcentajes.
Cómo usar las barras de desplazamiento para mostrar el contenido que desborda dentro del elemento
Este ejemplo muestra cómo configurar la propiedad overflow para definir la acción correspondiente cuando el contenido del elemento es demasiado grande para adaptarse al área especificada.
Cómo ocultar el contenido que desborda en un elemento
Este ejemplo muestra cómo configurar la propiedad overflow para ocultar el contenido cuando el contenido del elemento es demasiado grande para adaptarse al área especificada.
Cómo configurar que el navegador maneje automáticamente el desbordamiento
Este ejemplo muestra cómo configurar que el navegador maneje automáticamente el desbordamiento.
Establecer la forma del elemento
Este ejemplo muestra cómo establecer la forma de un elemento. Este elemento se recorta dentro de esta forma y se muestra.
Alinear verticalmente imágenes
Este ejemplo muestra cómo alinear verticalmente imágenes en el texto.
Z-index
Z-index se puede utilizar para colocar un elemento después de otro.
Z-index
Los elementos del ejemplo anterior han cambiado el Z-index.

Atributos de alineación de CSS

Los atributos de alineación de CSS permiten que realice alineaciones en los elementos.

Atributo Descripción
position Coloca el elemento en una posición estática, relativa, absoluta o fija.
top Define el desplazamiento del borde superior externo del elemento de alineación con el borde superior del contenedor.
right Define el desplazamiento del borde derecho externo del elemento de alineación con el borde derecho del contenedor.
bottom Define el desplazamiento del borde inferior externo del elemento de alineación con el borde inferior del contenedor.
left Define el desplazamiento del borde izquierdo externo del elemento de alineación con el borde izquierdo del contenedor.
overflow Establecer qué sucede cuando el contenido del elemento se desborda de su área.
clip Establecer la forma del elemento. El elemento se corta dentro de esta forma y luego se muestra.
vertical-align Establecer la forma vertical de alineación del elemento.
z-index Establecer el orden de apilamiento de los elementos.