This blog is a public Pre-alpha. I'm working in my own Wordpress theme. I'm focusing on performance and SEO.
This theme will be able to download at July as a Pre-alpha.
Position de CSS — Parte 1/2

Position de CSS — Parte 1/2

¡Qué pasa crucks! Hoy vamos a ver cómo funciona la propiedad position de CSS junto a Spidey. Primero veremos la teoría del position, pasaremos a unas frases que nos resumen cuándo usarlos y por último practicaremos con Spidey.


Teoría

La propiedad position nos permite elegir cómo se posiciona una etiqueta dentro de una página web. Elegir el position es esencial para maquetar una web ya que es gran parte de la maquetación de la misma.

Es importante tener claros los conceptos, así que vamos a comenzar.

Existen 4 tipos de position: Static, Relative, Absolute y Fixed. (Vamos a obviar Sticky)

Static: Es el position por defecto, eso significa que la etiqueta tiene flujo Natural. No tiene ningún tipo de referencia. Dicho en lenguaje sencillo: no podemos usar las propiedades top, left, right y bottom. No funcionan.
Las etiquetas hermanas se pueden colocar al lado.

Relative: Este position igual que el resto es impuesto. La referencia que usará para las propiedades top, left, right y bottom será su propio borde. Las etiquetas hermanas se pueden colocar al lado.

Absolute: Este position es impuesto. La referencia que usará para las propiedades top, left, right y bottom será el borde del padre siempre que el padre tenga un position impuesto. Las etiquetas hermanas se superponen.

Fixed: Este position es impuesto. La referencia que usará con las propiedades top, left, right y bottom será el borde del Viewport, es decir, de la ventana del navegador. Las etiquetas hermanas se superponen.

Te dejo un resumen en un iframe de codepen.io.

¿Cuándo se usan?

Si lo tuyo no es la teoría 100%, no te preocupes voy a darte una serie de frases que te resumen cuándo usar cada uno de los position de forma más general.

Por supuesto pueden existir algunas situaciones extras donde usarlos, pero estos consejos son para la gran mayoría de situaciones que se dan normalmente.

Static: Ni lo pienses. Viene por defecto y no lo vas a escribir.

Relative: Lo vas a usar en 3 ocasiones:
· Cuando un contenedor tenga etiquetas hijas absolute, el contenedor (como mínimo) debe de tener relative.
· Cuando quieres mover una etiqueta sobre sí misma sin afectar al resto. (Aunque se puede hacer con transform, hacerlo con relative es más compatible con Internet Explorer)

Absolute: Lo usarás en dos ocasiones:
· Cuando tengas que superponer varias etiquetas unas sobre otras.
· Cuando tengas que alinear una etiqueta a los bordes del padre. (Flechas de los slider, los puntos…)

Fixed: Es el más fácil de usar, sólo cuando tienes algo fijo al hacer scroll en tu página web.


Jugando con Spidey (Spoilers de Infinity War)

Te dejo el enlace al próximo artículo en Medium donde vamos a hacer una analogía con Iron Man y Spiderman y la propiedad position.

Espero que te haya ayudado y te dejo el enlace hacia la W3Schools para que tengas la referencia oficial sobre el position.

¡Un saludo cruck!