Relative Positionierung bezieht sich nicht auf den Nullpunkt des übergeordneten Elements, sondern auf den "Hier geht es weiter"-Punkt dieses Elements. Das kann z.B. dann interessant werden, wenn sich in einem Element außer Bereichen auch noch Bilder und Texte ohne Bereichszuweisung befinden. Für Bereich #1 macht das hier keinen Unterschied: Der Nullpunkt und "Hier geht es weiter"-Punkt des mit dem weißen Rahmen angezeigten und ansonsten leeren Bereichs sind identisch.
Bereich #2 und #3 sind logisch außerhalb des weißen Rahmens an <body>verankert; der Bezugspunkt für die absolute Version (lila) ist der Nullpunkt des Body, der Bezugspunkt für die mit den gleichen Werten, aber relativ positionierten Versionen (gelb) sind die Worte "zu 2" und "zu 3" - und da eben die Stelle, an der es weitergehen würde.
Vielfach wird von der Verwendung dieser Positionierungsart abgeraten, und tatsächlichgibt es viele Fallgruben. Außerdem läßt sich relative Positionierung durch konsequenten Einsatz von Bereichen fast immer vermeiden. Im Übrigen kann man natürlich, um das Maß der Verwirrung zum Überlaufen zu bringen, auch bei relativer Positionierung die Maßangaben sowohl relativ (in %) als auch absolut (in px) vornehmen - viel Spaß bei der absolut-relativen Positionierung also.
Jetzt geht es mit was Nützlichem weiter