La propiedad position

Coordenadas de posición

Si utilizamos un modo de posicionamiento diferente al estático (absolute, fixed, sticky o relative), podemos utilizar una serie de propiedades para modificar la posición de un elemento. Es importante tener en cuenta que dichas propiedades solo tendrán efecto si no tenemos la propiedad position establecida a static.

Estas propiedades son las siguientes:

Estas propiedades, lo único que hacen es colocar o fijar el elemento en el punto concreto indicado, de modo que si indicas left: 0 significa que quieres que el elemento esté colocado 0 píxeles desde la izquierda. Puede contener valores negativos, invirtiendo la dirección.

div {
  width: 100px;
  height: 50px;
  position: relative;
}

.a {
  background: darkred;
  border: 2px solid black;
}

.b {
  background: indigo;
  border: 2px solid black;

  position: relative;
  top: -25px;
  left: 25px;
}

<div class="a"></div>
<div class="b"></div>

Observa el ejemplo anterior:

• Hemos posicionado el elemento .b de forma relativa (ver más adelante).
• Hemos movido el elemento desde arriba (top) 25px hacia arriba (negativo).
• Hemos movido el elemento desde la izquierda (left) 25px hacia la derecha (positivo).
• El elemento .b se posiciona por encima de .a, ya que está colocado después en el HTML.

Para entenderlo mejor, veremos un ejemplo en cada una de las modalidades que explicaremos en los siguientes posts.

NOTA: Ten en cuenta que estas propiedades sólo funcionarán si no estamos en un posicionamiento static. En el caso de estarlo, simplemente se ignorarán.

Atajo: La propiedad inset

La propiedad inset es una propiedad de atajo para las cuatro propiedades anteriores: top, right, bottom, left. Podemos utilizarla indicando diferentes parámetros:

• 1 parámetro: Se aplica el mismo valor a todos: top, right, bottom y left.
• 2 parámetros: Primer valor a top y bottom, y el segundo a left y right.
• 3 parámetros: Primer valor a top, el segundo a right y left y el tercero a bottom.
• 4 parámetros: Primer valor a top, el segundo a right, el tercero a bottom y el cuarto a left.

Veamos algunos ejemplos:

.container {
  position: relative;
  inset: 20px;                /* (Todos a 20px) */
  inset: 50px 25px;           /* top: 50px; right: 25px; bottom: 50px; left: 25px; */
  inset: 50px 25px 10px;      /* top: 50px; rigth: 25px; bottom: 10px; left: 25px; */
  inset: 50px 25px 10px 40px; /* top: 50px; right: 25px; bottom: 10px; left: 40px; */
}

Profundidad (niveles)

Es interesante conocer también la existencia de la propiedad z-index, que es una forma de indicar una distancia en el eje Z, es decir, en el eje de profundidad. CSS establece un nivel de profundidad en el que está un elemento sobre los demás. De esta forma, podemos hacer que un elemento se coloque encima o debajo de otro.

Para ello, utilizaremos la propiedad z-index, asignándole un valor numérico:

Los elementos con un número más alto estarán por encima de otros elementos, y los elementos con un número más bajo permanecerán ocultos detrás de otros elementos. Por defecto, los elementos tienen un z-index de 0.

Recuerda: Los niveles z-index, así como las propiedades top, left, bottom, right e inset no funcionan con elementos que estén utilizando posicionamiento estático. Deben tener un tipo de posicionamiento diferente a static.