Saber Cuándo Usar Posicionamiento Absoluto Versus Relative en CSS

Saber Cuándo Usar Posicionamiento Absoluto Versus Relative en CSS

Saber Cuándo Usar Posicionamiento Absoluto Versus Relative en CSS

VALORACIÓN DEL ARTÍCULO:
5/5


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 CSS como Flexbox y CSS Grid, el posicionamiento sigue ocupando un lugar importante en la bolsa de trucos de cualquier diseñador web.

Cuando se utiliza el posicionamiento CSS, lo primero que hay que hacer es establecer la propiedad CSS de posición para indicar al navegador si se va a utilizar el posicionamiento absoluto o relativo para un elemento determinado. También es necesario comprender la diferencia entre estas dos propiedades de posicionamiento.

Mientras que absolutas y relativas son las dos propiedades de posición CSS más utilizadas en el diseño web, en realidad hay cuatro estados de la propiedad de posición:

  • estática
  • absoluto
  • pariente
  • fijo

Posicionamiento estático

Estática es la posición por defecto para cualquier elemento de una página web. Si no se define la posición de un elemento, es estática, lo que significa que se visualiza en la pantalla en función de dónde se encuentra en el documento HTML y cómo se visualiza dentro del flujo normal de ese documento.

Si aplica reglas de posicionamiento como top o left 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, o nunca, es necesario establecer un elemento en una posición estática en CSS porque es el valor por defecto.

Posicionamiento absoluto de CSS

El posicionamiento absoluto es probablemente la posición de CSS más fácil de entender. Comienza con esta propiedad de posición CSS:

Este valor le indica al navegador que cualquier cosa que se vaya a colocar debe ser removida del flujo normal del documento y colocada en una ubicación exacta en la página. Esto se calcula basándose en el antepasado no estáticamente posicionado más cercano de ese elemento. Debido a que un elemento absolutamente posicionado es sacado del flujo normal del documento, esto afecta la forma en que los elementos antes o después de él en el HTML son posicionados en la página web.

Por ejemplo, si tiene una división que está posicionada usando un valor de relativo y dentro de esa división, tiene un párrafo que quiere posicionar 50 píxeles desde la parte superior de la división, agregue un valor de posición de absoluto a ese párrafo junto con un valor de desplazamiento de 50px en la propiedad superior , así:

posición: absoluta;
.top: 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 absolutamente posicionado utiliza el relativamente posicionado como su contexto, y el valor de posicionamiento que usted utiliza es relativo a eso.

Las cuatro propiedades de posicionamiento que tiene a su disposición son:

  • arriba
  • derecha
  • abajo
  • izquierdo

Puede utilizar arriba o abajo - ya que un elemento no se puede posicionar de acuerdo con estos dos valores - y a la derecha o a la izquierda .

Si un elemento se establece en una posición de absoluto, pero no tiene antepasados no estáticamente posicionados, entonces se posiciona en relación con el elemento del cuerpo, que es el elemento de nivel más alto de la página.

Posicionamiento relativo

El posicionamiento relativo utiliza 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áticamente posicionado más cercano, parte de donde estaría el elemento si estuviera todavía en el flujo normal.

Por ejemplo, si tiene tres párrafos en su página web y el tercero tiene una posición : estilo relativo , su posición se desplaza en función de su ubicación actual.

En el ejemplo anterior, el tercer párrafo se sitúa a 2em del lado izquierdo del elemento de contenedor, pero aún por debajo de los dos primeros párrafos. Permanece en el flujo normal del documento y se desplaza ligeramente. Si lo cambia a posición: absoluta , cualquier cosa que le siga se mostrará encima 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 establecer un valor de desplazamiento, 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 contra el cual otros elementos pueden ser posicionados absolutamente. Por ejemplo, si tiene una división alrededor de todo su sitio web con un valor de clase de contenedor , que es un escenario común en el diseño web, esa división se puede establecer en una posición de relativa para que cualquier cosa dentro de ella pueda utilizarla como contexto de posicionamiento.

¿Qué pasa con el posicionamiento fijo?

El posicionamiento fijo es muy parecido al posicionamiento absoluto. La posición del elemento se calcula de la misma manera que en el modelo absoluto, pero los elementos fijos se fijan en ese lugar, casi como una marca de agua. Todo lo demás en la página luego se desplaza más allá de ese elemento.

Para utilizar este valor de propiedad, se fija:

Tenga en cuenta que cuando fija un elemento en su sitio, se imprime en esa ubicación cuando se imprime su página web. Por ejemplo, si su elemento está fijado en la parte superior de su página, aparecerá en la parte superior de cada página impresa porque está fijado en la parte superior de la página. Puede utilizar tipos de medios para cambiar la forma en que las páginas impresas muestran los elementos fijos:

Pantalla

@media {
>@media h1#first { posición: fija; }
}
@media print {
h1#first { posición: estática; }
}

Deja un comentario

TAMBIÉN TE INTERESA

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras