CSS Positioning: ¡¿Dónde está mi caja?!

Sucede muchas veces que tenemos el diseño de una web para maquetar (o sea, pasarlo a HTML y darle estilos con CSS), pero que al estructurarlo no nos queda como el diseño nos lo exige. Supongamos que necesitamos que un elemento se quede a X pixeles de distancia de otro en todo momento, o que cierto elemento debe estar fijo en la pantalla aunque hagamos scroll, o que por cosas de diseño debemos ubicar al elemento en cierta parte en particular, y así. Sí, ciertas cosas podríamos hacerlas con otras propiedades como margin o padding (como distanciar visualmente un elemento de otro), pero para todo lo demás es que existe una propiedad llamada position.

La propiedad position de CSS es de las más utilizadas cuando queremos definir la ubicación de un elemento dentro de nuestro documento. Ésta especifica el tipo de posicionamiento que tendrá el elemento al que afectaremos. Cabe destacar que todo esto varía según las características que tenga el valor de position que pongamos. Es decir, usaremos un valor distinto según el cómo queramos posicionar dicho elemento.

Antes que todo: Coordenadas!

Sí, para ocupar position debes entender que para mover cualquier elemento, éste lo hará según ciertas coordenadas. Estas coordenadas son las que definen en qué lugar irá el elemento, luego de haber definido qué tipo de posicionamiento tendrá. Cada vez que cambiamos el tipo de posicionamiento de un elemento (por ejemplo, cuando le designamos el position absolute a un elemento que originalmente es static), se genera en él un eje de coordenadas imaginario. Para cada tipo de posicionamiento el eje de coordenadas será distinto, ya que éste nacerá desde un punto diferente según su position.

Propiedades left, right, top y bottom

Luego de definir el position del elemento, debemos decirle cuánto queremos que se mueva. Para esta tarea existen otras propiedades: left, right, top y bottom, las cuales aceptan como valor medidas (en px, em, vw, etc). Estas medidas definirán las nuevas posiciones :).

Tipos de position

position: static;

Position static.

Es el valor por defecto, o sea, es el posicionamiento normal. Con él, los elementos se muestran en el orden en el que están según el flujo del documento. Esto quiere decir, aparecen según su orden en HTML, y para mostrar cada elemento sólo se tiene en cuenta su display (o sea, si está en linea, en bloque, etc). Este valor no toma en cuenta las coordenadas que se dan con left, right, top y bottom, ya que no se mueve de su posición original (esto también quiere decir que no utiliza eje de coordenadas, por lo que si le ponemos las propiedades antes mencionadas, nada sucederá con el elemento).

position: absolute;

Position absolute
CSS del ejemplo anterior.

Con este valor de position, el elemento se posiciona en relación a su primer ancestro posicionado con algún valor que no sea static. Es decir, si tengo un <div> dentro de otro <div>, y quiero que el que está adentro se posicione según el que lo contiene, éste (o sea, el que lo contiene) debiese tener position absolute, relative o fixed, y el que irá dentro, position absolute con las coordenadas correspondientes.

El eje de coordenadas o referencia respecto de la que se desplaza un elemento absolute son los bordes (arriba, abajo, izquierda, derecha) del elemento padre (o ancestro -no static- que lo contiene). Esto quiere decir que si le doy top:20px estará a 20 px de distancia del borde superior del elemento padre, y si le pongo top:0, se “pegará” al borde superior. Si de todos sus ancestros no hay ningún elemento que no sea static, su posición se dará según los bordes de <body>, que es su más “grande ancestro”.

position: relative;

Position relative
CSS del ejemplo

El valor relative de position es el más “independiente” de todos, ya que genera un eje de coordenadas desde la posición inicial del elemento. Es decir, la medida de desplazamiento empieza a contar desde el espacio donde éste se encuentra. Por ejemplo, si al elemento relative le pongo top:20px, se desplazará 20 pixeles desde donde está su top, hacia abajo. Este desplazamiento no afecta a los otros elementos del documento, ya que deja al elemento relative como si no tuviese posición, y luego la ajusta sin cambiar la disposición (o sea, el lugar donde se encuentra) de los otros elementos. Esto se traduce a dejar vacío el espacio donde originamente estaba el elemento.

position: fixed;

El position fixed lo que hace es dejar fijo el elemento. También recibe coordenadas, por lo que podemos dejar el elemeto fijo en el lugar que queramos. El valor fixed es una variante del position absolute, ya que su eje de coordenadas también está relacionado a bordes, pero en vez de que sea del elemento-ancestro-no-static que delimitaba al absolute, es la ventana del navegador su eje. Por ejemplo, si le pongo position:fixed, bottom:0 y left:0 a un elemento, éste se pegará a la esquina inferior izquierda y se quedará ahí aunque yo haga scroll. Como dato, un elemento fixed no deja espacio en el lugar del documento donde estaba ubicando anteriormente.

Espero que el conocer los tipos de positioning te ayude cada vez más a resolver diseños más complejos, donde sea necesaria una mayor precisión en la ubicación de elementos ❤.

¡Buena suerte en la aventura del código!

Show your support

Clapping shows how much you appreciated Susana Opazo’s story.