Absoluto versus relativo – Explicando el posicionamiento CSS

El posicionamiento CSS es más que solo coordenadas X, Y El posicionamiento CSS ha sido durante mucho tiempo una parte importante de la creación de diseños de sitios web.

El posicionamiento CSS es más que solo coordenadas X, Y

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 todavía tiene 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 la posición para decirle al navegador si va a usar un posicionamiento absoluto o relativo para un elemento dado. También debe comprender la diferencia entre estas dos propiedades de posicionamiento.

Si bien absoluto y relativo son las dos propiedades de posición CSS que se usan con mayor frecuencia en el diseño web, en realidad hay cuatro estados para la propiedad de posición:

  • estático
  • absoluto
  • relativo
  • fijo

Posicionamiento estático

Estática 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 arriba 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 . Raramente, 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. Comienza con esta propiedad de posición CSS:

 posición: absoluta; 

Este valor le dice al navegador que lo que se va a colocar debe eliminarse del flujo normal del documento y, en su lugar, colocarse en una ubicación exacta en la página. Esto se calcula en función del ancestro no estático más cercano de ese elemento. Debido a que un elemento posicionado absolutamente se saca del flujo normal del documento, sí afecta la forma en que los elementos anteriores o posteriores en el HTML se posicionan en la página web.

Como ejemplo, si tiene una división que se coloca utilizando un valor relativo y dentro de esa división, tiene un párrafo que desea colocar a 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 desplazamiento de 50px en la propiedad top , de esta manera:

 posición: absoluta; 
arriba: 50px;

Este elemento en posición absoluta siempre muestra 50 píxeles desde la parte superior de esa división relativamente posicionada, sin importar qué más se muestra allí en flujo normal. Su elemento absolutamente posicionado usa el elemento relativamente posicionado como contexto, y el valor de posicionamiento que usa es relativo a eso.

Las cuatro propiedades de posicionamiento que tiene disponibles para usar son:

  • parte superior
  • Correcto
  • fondo
  • izquierda

Puede usar arriba o abajo , ya que un elemento no se puede colocar de acuerdo con estos dos valores, y derecha o izquierda .

Si un elemento se establece en una posición absoluta, pero no tiene antepasados ​​no estáticos, entonces se coloca 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 ancestro 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 una posición : relativa , su posición se compensa 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 posiciona 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 desplazado. Si lo cambia a position: absolute , todo lo que sigue se muestra encima porque ya no está en el flujo normal del documento.

Los elementos en una página web a menudo se usan para establecer un valor de posición: relativo sin establecer un valor de compensación, lo que significa que ese 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 absolutamente.Por ejemplo, si tiene una división que rodea 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 relativo para que cualquier cosa dentro de él pueda usarlo como contexto de posicionamiento.

¿Qué pasa con el posicionamiento fijo?

El posicionamiento fijo se parece mucho 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 usar este valor de propiedad, establezca:

 posición: fija; 

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á fijado 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 # first {position: fixed; }
}
@media print {
h1 # first {position: static; }
}

Rate article
labsfabs.com
Add a comment