Más de position

position

Para poder tener estructuras mas complejas, tenemos que discutir la propiedadposition (posición). Esta propiedad tiene un montón de posibles valores, sus nombres no tienen sentido y son casi imposibles de memorizar. Veámoslos uno a uno, pero antes deberías guardar esta página en tus marcadores para futuras referencias.

static

.static {
  position: static;
}

<div class="static">

static (estático) es el valor por defecto. Un elemento con position: static; no está posicionado en ninguna forma en específico. Se dice que un elemento static, está no posicionado y un elemento con valor establecido de position está posicionado.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

<div class="relative1">

relative (relativo) se comporta de la misma manera que static a menos que le agregues otras propiedades.

</div>

<div class="relative2">

Establecer las propiedades top, right, bottom, y left de un elemento con position: relative; causará que su posición normal se reajuste. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento.

</div>

fixed

<div class="fixed">

Hello! Don't pay attention to me yet.

</div>

Un elemento fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página. Al igual que con relative, las propiedades top, right, bottom, y lefttambién son usadas.

Estoy seguro que ya notaste el elemento fijo en la parte de abajo a la derecha de la página. Te doy permiso de que lo veas ahora. Aqui está el CSS que lo posiciona donde está:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

Un elemento con valor fixed no deja espacio en el lugar de la página donde estaba ubicado normalmente.

Los buscadores móviles, sorprendentemente no tienen muy buen soporte para el valor fixed. Aprende más al respecto aqui.

absolute

absolute (absoluto) es el valor más mañoso. absolute se comporta como fixed pero es relativo a su ancestro posicionado más cercano en lugar de ser relativo a la ventana del navegador. Si un elemento con position: absolute; no tiene ancestros posicionados, usará el elemento body del documento, y se seguirá moviendo al hacer scroll en la página. Recuerda, un elemento "posicionado" es aquel cuyo valor es cualquiera excepto static.

Aqui hay un ejemplo sencillo:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

<div class="relative">

Este elemento está usando position: relative;. Si estuviera usandoposition: static; su sucesor con position: asbsolute; escaparía y se posicionaría relativamente al body del documento.

<div class="absolute">

Este elemento tiene position: asbsolute;. Se posiciona de manera relativa a su ancestro.

</div>

</div>

Sé que esto es complicado, pero es esencial para crear estructuras con CSS de manera correcta. En la siguiente página usaremos position en un ejemplo más práctico.