Le popup a "position: absolute", ce qui permet de le déplacer n'importe où à l'aide de "left" et "top" (ce sera fait dans le JS)
Par ailleurs, "position: absolute" transforme le popup en un "containing block" : tous les éléments à l'intérieur du popup qui ont "position: absolute" sont positionnés par rapport au popup (et non pas par rapport à la page).
C'est pour ça que "top:0" positionne .fermer en haut du popup et pas en haut de la page.
De la même manière l'image .triangle est positionné en bas du popup (et pas en bas de la page). La valeur négative de bottom, fait sortir l'image en dehors de la région d'affichage de son parent (le popup). Ce n'est pas un problème, cette situation s'appelle un "overflow".