Besser und vor allem zuverlässiger wäre es, den Absatz relativ zum Kopfbereich zu positionieren, und genau das erreichen Sie durch einen einfachen Trick. Wie hieß es etwas weiter oben so schön:

• Die absolute Positionierung eines Elements erfolgt relativ zum nächsten umgebenden Element (containing block), das ebenfalls positioniert ist (relative, absolute oder fixed).

Und jetzt der Trick:

• Wenn Sie den Kopfbereich mit position:relative versehen, ihm aber keinerlei Werte mit auf den Weg geben, bleibt er zwar im flow, gilt aber als positioniert. 
• Und dadurch wird der Kopfbereich zum Bezugspunkt für die absolute Positionierung von #kopfbereich p.

Klingt kompliziert? Probieren Sie es aus:

Auf den ersten Blick sieht das Ergebnis gar nicht so viel anders aus als in Abbildung 12.5:

Abbildung 12.7: Absolut positioniert, relativ zum Kopfbereich

Diese Kombination von absoluter und relativer Positionierung bietet einige Vorteile:

• Der Bezugspunkt für den Absatz ist jetzt #kopfbereich, und zwar genau genommen die äußere Kante des padding (»the padding edge«) oben und rechts.
• Wenn zum Beispiel die Seite selbst nicht mehr zentriert wird, macht das nichts, der Absatz wird den Kopfbereich niemals verlassen.

Merke: Die absolute Positionierung wird durch diesen kleinen Trick relativ flexibel.

Wenn der Wrapper nicht mehr im Browserfenster zentriert wird, bleibt der Absatz trotzdem innerhalb des Kopfbereichs:

Abbildung 12.8: Absolut positioniert, relativ zum Kopfbereich

Mit einem einfachen display: block für das span-Element können Sie das rot eingefärbte Wort »Grundlagen« übrigens eine Zeile tiefer setzen. Und mit einem text-align: right für das umgebende p würden beide Zeilen rechts ausgerichtet werden. Probieren Sie es einmal aus.