Position en CSS

< Anterior Siguiente >

¿Qué es la propiedad position en CSS?

La propiedad position en CSS se utiliza para especificar cómo un elemento debe ser posicionado en la página. Existen varios valores que afectan de manera diferente la ubicación de los elementos dentro de su contenedor.

Valores de position

La propiedad position puede tomar los siguientes valores:

1. Position Static

Este es el valor por defecto. Un elemento con position: static; sigue el flujo normal del documento y no se ve afectado por las propiedades top, right, bottom, o left.

/* Ejemplo de uso */
.elemento-estatico {
    position: static;
}

2. Position Relative

Un elemento con position: relative; se posiciona relativo a su posición original en el documento. Puedes moverlo usando las propiedades top, right, bottom, o left, sin afectar el flujo normal del documento.

/* Ejemplo de uso */
.elemento-relativo {
    position: relative;
    top: 10px;
    left: 20px;
}

3. Position Absolute

Un elemento con position: absolute; se posiciona respecto a su contenedor más cercano que tenga una posición distinta de static. Si no hay tal contenedor, se posiciona respecto a la página.

/* Ejemplo de uso */
.elemento-absoluto {
    position: absolute;
    top: 50px;
    right: 20px;
}

4. Position Fixed

Un elemento con position: fixed; se posiciona respecto a la ventana del navegador, lo que significa que permanece en la misma posición incluso cuando el usuario hace scroll.

/* Ejemplo de uso */
.elemento-fijo {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

5. Position Sticky

Un elemento con position: sticky; se comporta como un elemento relative hasta que el usuario hace scroll hasta un cierto punto, donde entonces se "pega" en su lugar y se comporta como fixed.

/* Ejemplo de uso */
.elemento-pegajoso {
    position: sticky;
    top: 0;
}

Uso de las Propiedades top, right, bottom, left

Estas propiedades se utilizan junto con position: relative, absolute, fixed, o sticky para ajustar la ubicación de un elemento. Los valores pueden ser positivos o negativos, y pueden ser en unidades como píxeles (px), porcentajes (%), o em.

/* Ejemplo de uso */
.elemento {
    position: absolute;
    top: 50px;
    left: 100px;
}

Ejemplos Prácticos

A continuación, se muestra cómo diferentes valores de position afectan la disposición de los elementos en la página:

/* Elemento relativo */
.relativo {
    position: relative;
    top: 20px;
    left: 30px;
}

/* Elemento absoluto */
.absoluto {
    position: absolute;
    top: 50px;
    left: 50px;
}

/* Elemento fijo */
.fijo {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #f00;
    color: #fff;
    padding: 10px;
}

Consejos para Usar position en CSS