Acerca de este sitio

Para poder tener estructuras mas complejas, tenemos que discutir la propiedad position (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;
}

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;
}

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

</div>

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

Hola! No me prestes atención todavía

</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 left tambié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. Aquí 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 aquí.

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.

Aquí hay un ejemplo sencillo:

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

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

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

</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.

Anterior Siguiente