Position von zwei Elementen stimmt nicht. Warum?

[Jan-Frederik Stieler]

Hallo,
weiß jemand warum der helblauen Apfel nicht direkt über dem grauen liegt?
http://jsbin.com/acogor/3/edit

Wenn ich

.loader>div div {
color: lightblue;
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
overflow: hidden;
  
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

in

.loader>div div {
color: lightblue;
position: absolute;
width: 100%;
height: 100%;
top: 0;
overflow: hidden;
  
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

ändere sitzt es richtig.

Grüße