Desplazamientos: top, right, bottom, left

Para ejemplificar estas propiedades, vamos a ubicar esta imagen dentro de un elemento DIV. A su vez, ese DIV estará contenido por otro -con fondo gris- al que le hemos asignado la propiedad position:relative, de modo que resulte el bloque de contención para los de la imagen.

ej1 {position: absolute;
     top: 50%;
     left: 50%;
    }

Notarán que la imagen no aparece perfectamente centrada a pesar de haber usado un porcentaje de 50%. Esto es así porque el elemento que contiene la imagen no se alinea por su centro sino por su borde superior (para top) y por su borde izquierdo (para left). Veamos el mismo porcentaje pero con bottom y right:

DIV {position: absolute;
     bottom: 50%;
     right: 50%;
    } 

En este segundo caso, es el vértice inferior derecho de la imagen el que queda ubicado exactamente en el centro del bloque de contención. Con el uso de valores negativos podemos hacer que la imagen se ubique por fuera de su bloque de contención.

DIV {position: absolute;
     bottom: -23px;
     left: -23px;
    }