Valores negativos en el posicionamiento CSS

Las propiedades que hemos estudiado top, right, bottom y left pueden aceptar no solo valores positivos, sino también valores negativos. Veamos algunos ejemplos.

Ejemplo

En el siguiente ejemplo, el elemento se posiciona de forma absoluta en relación con su elemento padre y se coloca en la posición 0 desde la parte superior, 0 desde la izquierda:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Ejemplo

Y ahora movamos el elemento a la posición -20px desde la parte superior, -30px desde la izquierda:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: