Hola,
no se me dan muy bien las explicaciones, yo aprendí haciendo bastantes pruebas. Al final lo acabas entendiendo. A veces basta con leer las definiciones para entenderlo más o menos y ya puedes hacer pruebas:
http://www.w3schools.com/cssref/pr_class_position.asp
Puedes buscar en youtube algún vídeo donde te lo muestren para verlo mejor, hay bastantes tutoriales sobre CSS.
En tu caso, el position:absolute se aplica sobre el body del documento (por que es su padre), por lo que el top es respecto a la parte superior del documento.
La imagen, que esta DENTRO del .foto tiene una posicion:relative. ¿Relativa a donde? Pues a su padre.
Esto ultimo igual te ha confundido por que he usado nombres parecidos... .foto es el contenedor y img es el contenido. Pero .img1 y .img2 son dos clases diferentes a img (fíjate en el punto, si tiene punto es una clase y si no es un elemento), estas dos son una segunda clase para los contenedores que sirve para declarar su posición, nada más.
Eso quiere decir que hay un div con una posición absoluta respecto al documento que marca los limites, tanto de ancho como de alto, del contenido que tendrá dentro (la imagen). El contenido tiene una posición relativa para poder posicionarlo centrado dentro de el contenedor. Si no lo quieres centrar o vas a poner algo mas pues tendras que pensar otro método. Yo lo he hecho pensando en que dentro del div únicamente habrá una imagen y nada más.
¿Como lo centro? pues en el eje X lo centro usando margin:auto (por eso display: block, si no no funcionaria.) Y para centrarlo en el eje Y he usado translate (esto ultimo podría haberlo hecho con los dos). Esto es por que no sabes el ancho y alto que tendrá en cada momento. Si no la centras, pues la imagen estaría a la izquierda y hacia arriba (sobre todo cuando se haga pequeña). Lo de centrar se puede hacer de diferentes maneras, yo sulo hacerlo asi.
El max-width y max-height son para que nunca sobrepase a su padre. Las imágenes tienen por defecto su tamaño natural, si es menor al contenedor (recuerda que su contenedor es .foto) se centra con margin y translate. Si es mayor se hacen más pequeñas. ¿Cuanto más pequeña? Pues depende del contenedor. El tamaño máximo siempre serán los margenes del contenedor y la otra propiedad se ajusta sola (por que no esta definida, solo le hemos puesto un máximo).
Un ejemplo: Si tienes una contenedor de 300x200 y dentro una imagen cuadrada que mide 400px, la imagen se adapta y medira 200px, ajustándose al alto y . Si el contenedor es de 300x800 la imagen medirá 300, ajustándose al ancho. Y si el contenedor de de 500x500, pues la imagen media 400px.
Bueno, como ves no se me da bien explicar xD pero tranquilo que si buscas algo en youtube o google seguro que te lo explican mejor. Crea una pequeña página de pruebas y ponte a hacer todo tipo de pruebas.
Saludos.