Absolut in relativ

Gehen wir zurück zur Katzenseite, mit allem, was du bisher darauf gemacht hast, und setzen wir die absolute Position so ein, wie sie am häufigsten verwendet wird.

Ein Element relativ zur ganzen Seite zu platzieren, ist selten das, was wir wollen. Viel öfter wollen wir es in eine Ecke eines anderen Elements setzen: ein Abzeichen auf einer Karte, einen Schließen-Button in der Ecke eines Fensters oder eine Beschriftung auf einem Foto.

Der Trick ist, dem Elternelement position: relative zu geben. Ohne Verschiebungen bewegt sich das Elternelement überhaupt nicht, aber es wird zum nächsten Vorfahren mit einer Position. Die Verschiebungen seiner Kinder mit position: absolute werden dann von seinen Rändern aus gemessen:

.karte {
	position: relative;
}

.schliessen {
	position: absolute;
	top: 10px;
	right: 10px;
}

Wo auch immer die Karte auf der Seite ist, das Element mit der Klasse schliessen sitzt 10 Pixel vom oberen Rand und 10 Pixel vom rechten Rand der Karte entfernt. (Die Verschiebungen werden vom inneren Rand des Rahmens der Karte aus gemessen.)

Wir haben der Karte des Persers ein Abzeichen hinzugefügt: ein span mit der Klasse abzeichen. Setzen wir es in die obere rechte Ecke der Karte.