El posicionamiento CSS ha sido durante mucho tiempo una parte importante de la creación de diseños de sitios web. Incluso con el auge de las técnicas de diseño de CSS como Flexbox y CSS Grid, el posicionamiento aún ocupa un lugar importante en la bolsa de trucos de cualquier diseñador web.
Al usar el posicionamiento CSS, lo primero que debe hacer es establecer la propiedad CSS para que la posición le diga al navegador si va a usar el posicionamiento absoluto o relativo para un elemento determinado. También debe comprender la diferencia entre estas dos propiedades de posicionamiento.
Si bien absoluta y relativa son las dos propiedades de posición de CSS que se usan con más frecuencia en el diseño web, en realidad existen cuatro estados para la propiedad de posición:
- estático
- absoluto
- relativo
- fijo
Posicionamiento estático
Estático es la posición predeterminada para cualquier elemento en una página web. Si no define la posición de un elemento, es estático, lo que significa que se muestra en la pantalla en función de dónde se encuentra en el documento HTML y cómo se muestra dentro del flujo normal de ese documento.
Si aplica reglas de posicionamiento como parte superior o izquierda a un elemento que tiene una posición estática, esas reglas se ignoran y el elemento permanece donde aparece en el flujo de documentos normal. Rara vez, si alguna vez, necesita establecer un elemento en una posición estática en CSS porque es el valor predeterminado.
Posicionamiento absoluto de CSS
Posicionamiento absoluto es probablemente la posición CSS más fácil de entender. Empiezas con esta propiedad de posición CSS:
posición: absoluta;
Este valor le dice al navegador que todo lo que se vaya a posicionar debe eliminarse del flujo normal del documento y, en cambio, colocarse en una ubicación exacta en la página. Esto se calcula basándose en el antecesor posicionado no estáticamente más cercano de ese elemento. Debido a que un elemento con una posición absoluta se saca del flujo normal del documento, afecta la forma en que los elementos anteriores o posteriores al HTML se colocan en la página web. Como ejemplo, si tiene una división que está posicionada usando un valor relativo y dentro de esa división, tiene un párrafo en el que desea colocar 50 píxeles desde la parte superior de la división, agrega un valor de posición de absoluto a ese párrafo junto con un valor de compensación de 50px sobre el parte superior propiedad, como esta: posición: absoluta;superior: 50px;
Este elemento absolutamente posicionado siempre muestra 50 píxeles desde la parte superior de esa división relativamente posicionada, sin importar qué más se muestre allí en flujo normal. Su elemento posicionado absolutamente utiliza el posicionado relativamente como su contexto, y el valor de posicionamiento que utiliza es relativo a eso. Las cuatro propiedades de posicionamiento que tiene disponibles para usar son: Puedes usar cualquiera parte superior o fondo - ya que un elemento no puede ser posicionado de acuerdo con ambos valores - y tampoco Correcto o izquierda. Si un elemento se establece en una posición de absoluto, pero no tiene ancestros posicionados no estáticamente, entonces se coloca en relación con el elemento del cuerpo, que es el elemento de nivel más alto de la página. El posicionamiento relativo usa las mismas cuatro propiedades de posicionamiento que el posicionamiento absoluto, pero en lugar de basar la posición del elemento en su antepasado no estático más cercano, comienza desde donde estaría el elemento si todavía estuviera en el flujo normal. Por ejemplo, si tiene tres párrafos en su página web, y el tercero tiene un posición: relativo estilo colocado en él, su posición se desplaza en función de su ubicación actual. Párrafo 1. Párrafo 2. Párrafo 3. En el ejemplo anterior, el tercer párrafo se coloca 2em desde el lado izquierdo del elemento contenedor, pero aún debajo de los dos primeros párrafos. Permanece en el flujo normal del documento y está ligeramente compensado. Si lo cambias a posición: absoluta, todo lo que sigue se muestra sobre él porque ya no está en el flujo normal del documento. Los elementos de una página web se utilizan a menudo para establecer un valor de posición: relativo sin un valor de compensación establecido, lo que significa que el elemento permanece exactamente donde aparecería en el flujo normal. Esto se hace únicamente para establecer ese elemento como un contexto en el que otros elementos pueden posicionarse de manera absoluta. Por ejemplo, si tiene una división que rodea su sitio web completo con un valor de clase de envase, que es un escenario común en el diseño web, esa división se puede establecer en una posición de relativo para que cualquier cosa dentro de él pueda usarlo como contexto de posicionamiento. El posicionamiento fijo es muy parecido al posicionamiento absoluto. La posición del elemento se calcula de la misma manera que el modelo absoluto, pero los elementos fijos se fijan en esa ubicación, casi como una marca de agua. Todo lo demás en la página se desplaza más allá de ese elemento. Para utilizar este valor de propiedad, establezca: posición: fijo
Tenga en cuenta que cuando arregla un elemento en su sitio, se imprime en esa ubicación cuando se imprime su página web. Por ejemplo, si su elemento está fijo en la parte superior de su página, aparecerá en la parte superior de cada página impresa porque está fijo en la parte superior de la página. Puede usar tipos de medios para cambiar la forma en que las páginas impresas muestran elementos fijos: @media screen { h1 # primera {posición: fija; } } @media print { h1 # primera {posición: estática; } }
Posicionamiento relativo
¿Qué pasa con el posicionamiento fijo?
