Propiedad position en CSS: static, relative, absolute, fixed

La propiedad position en CSS define el método de posicionamiento de un elemento dentro de su contenedor o del viewport. Cada valor afecta cómo se posiciona el elemento y cómo interactúa con otros elementos en la página. Los valores principales son static, relative, absolute, y fixed.

1. Position static

El valor static es el valor por defecto para todos los elementos. Los elementos con position: static se posicionan de acuerdo con el flujo normal del documento, sin ningún ajuste especial. No se les puede aplicar top, right, bottom, o left.

Características:

• Posicionamiento basado en el flujo del documento.
• No acepta las propiedades top, right, bottom, o left.

Ejemplo de código:

.static {
    position: static;
    /* Sin propiedades top, right, bottom, left */
}

2. Position relative

El valor relative posiciona el elemento en relación con su posición original en el flujo del documento. Es decir, el elemento se coloca según su posición normal, pero luego se ajusta con las propiedades top, right, bottom, y left. El espacio original del elemento aún se reserva en el flujo del documento.

• Características:
  • Posiciona el elemento en relación con su posición original.
  • Acepta las propiedades top, right, bottom, y left.
• Ejemplo de código:

.relative {
    position: relative;
    top: 20px;   /* Mueve el elemento 20px hacia abajo desde su posición original */
    left: 10px;  /* Mueve el elemento 10px hacia la derecha desde su posición original */
}

3. Position absolute

El valor absolute posiciona el elemento en relación con el contenedor más cercano que tenga un position distinto de static (es decir, relative, absolute, o fixed). Si no hay tal contenedor, el elemento se posiciona en relación con el viewport. El elemento se retira del flujo normal del documento, por lo que no afecta ni es afectado por otros elementos.

• Características:
  • Posiciona el elemento en relación con el contenedor más cercano que no sea static.
  • Acepta las propiedades top, right, bottom, y left.
  • El elemento no ocupa espacio en el flujo del documento.
• Ejemplo de código:

.absolute {
    position: absolute;
    top: 50px;   /* Posiciona el elemento 50px desde el borde superior del contenedor padre */
    left: 30px;  /* Posiciona el elemento 30px desde el borde izquierdo del contenedor padre */
}

4. Position fixed

El valor fixed posiciona el elemento en relación con el viewport. Esto significa que el elemento se mantendrá en la misma posición incluso cuando se haga scroll en la página. Al igual que absolute, el elemento con position: fixed se retira del flujo normal del documento.

• Características:
  • Posiciona el elemento en relación con el viewport.
  • El elemento permanece en la misma posición durante el scroll.
  • Acepta las propiedades top, right, bottom, y left.
• Ejemplo de código:

.fixed {
    position: fixed;
    bottom: 10px; /* Posiciona el elemento 10px desde el borde inferior del viewport */
    right: 20px;  /* Posiciona el elemento 20px desde el borde derecho del viewport */
}

Comparación Visual

Aquí hay una comparación de cómo se comportan los diferentes valores de position:

• Static:

+---------------------+
| Elemento estático  |
+---------------------+
| Elemento estático  |
+---------------------+

Relative:

+---------------------+
| Elemento relativo   |
| (ajustado)          |
+---------------------+

Absolute:

+---------------------+
| Contenedor          |
| +-----------------+ |
| | Elemento absoluto |  <- Posicionado en relación con el contenedor
| +-----------------+ |
+---------------------+

Fixed:

+---------------------+
|                     |
| +-----------------+ |
| | Elemento fijo   |  <- Fijo en la pantalla durante el scroll
| +-----------------+ |
|                     |
+---------------------+