Posición - Trucos CSS | Almanaque CSS 2024

La positionpropiedad puede ayudarlo a manipular la ubicación de un elemento, por ejemplo:

.element ( position: relative; top: 20px; )

En relación con su posición original, el elemento de arriba ahora se empujará hacia abajo desde la parte superior 20px. Si tuviéramos que animar estas propiedades, podemos ver cuánto control nos da (aunque esto no es una buena idea por razones de rendimiento):

relativees solo uno de los seis valores de la positionpropiedad. Aquí están los demás:

Valores

static: cada elemento tiene una posición estática por defecto, por lo que el elemento se mantendrá en el flujo de página normal. Entonces, si hay un conjunto de índice izquierdo / derecho / superior / inferior / z, entonces no habrá efecto en ese elemento.
relative: la posición original de un elemento permanece en el flujo del documento, al igual que el staticvalor. Pero ahora el índice izquierdo / derecho / superior / inferior / z funcionará. Las propiedades posicionales "empujan" el elemento de la posición original en esa dirección.
absolute: el elemento se elimina del flujo del documento y otros elementos se comportarán como si ni siquiera estuviera allí, mientras que todas las demás propiedades posicionales funcionarán en él.
fixed: el elemento se elimina del flujo del documento como elementos absolutamente posicionados. De hecho, se comportan casi de la misma manera, solo los elementos de posición fija son siempre relativos al documento, no a ningún padre en particular, y no se ven afectados por el desplazamiento.
sticky(experimental): el elemento se trata como un relativevalor hasta que la ubicación de desplazamiento de la ventana gráfica alcanza un umbral especificado, momento en el que el elemento toma una fixedposición en la que se le indica que se pegue.
inherit: el positionvalor no se distribuye en cascada, por lo que se puede usar para forzarlo específicamente, y inheritel valor de posicionamiento de su padre.

Absoluto

Si un elemento secundario tiene un absolutevalor, el elemento principal se comportará como si el elemento secundario no estuviera allí:

.element ( position: absolute; )

Y cuando tratamos de establecer otros valores como left, bottomy rightencontraremos que el elemento secundario no está respondiendo a las dimensiones de su padre, pero el documento:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Para hacer que el elemento secundario se posicione absolutamente desde su elemento principal, debemos establecer esto en el elemento principal:

.parent ( position: relative; )

Ahora propiedades tales como left, right, bottomy topse referirá al elemento padre, por lo que si hacemos que el elemento hijo transparente podemos verlo sentado en la parte inferior de la matriz:

Reparado

El fixedvalor es similar a, absoluteya que puede ayudarlo a colocar un elemento en cualquier lugar en relación con el documento, sin embargo, este valor no se ve afectado por el desplazamiento. Vea el elemento secundario en la demostración a continuación y cómo, una vez que se desplaza, continúa pegándose al final de la página:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
4	2	7	12	3.1

Móvil / Tablet

Android Chrome	Android Firefox	Androide	Safari de iOS
88	85	3	8

Pegajoso

El stickyvalor es como un compromiso entre los valores relativey fixed. En el momento de escribir este artículo, actualmente es un valor experimental, lo que significa que no es parte de la especificación oficial y solo es adoptado parcialmente por navegadores seleccionados. En otras palabras, probablemente no sea la mejor idea usar esto en un sitio web de producción en vivo.

¿Qué hace? Bueno, te permite colocar un elemento en relación con cualquier cosa en el documento y luego, una vez que un usuario se ha desplazado más allá de un cierto punto en la ventana gráfica, fija la posición del elemento en esa ubicación para que se muestre persistentemente como un elemento con un fixedvalor.

Tome el siguiente ejemplo:

.element ( position: sticky; top: 50px; )

El elemento estará relativamente posicionado hasta que la ubicación de desplazamiento de la ventana gráfica llegue a un punto donde el elemento estará 50pxdesde la parte superior de la ventana gráfica. En ese punto, el elemento se vuelve pegajosa y permanece a una fixedposición 50pxsuperior de la pantalla.

La siguiente demostración ilustra ese punto, donde la navegación superior es la relativeposición predeterminada y la segunda navegación está configurada stickyen la parte superior de la ventana gráfica. Tenga en cuenta que la demostración solo funcionará en Chrome, Safari y Opera en el momento de escribir este artículo.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.