Gruß

Diese Angabe müsste ja dann bedeuten, dass ich von der Oberkante des Elternelements 1000px nach unten gehe.

nein, weil die ursprüngliche Position ja -1000 ausgehend von der linken Oberkante des Elternelementes ist, das habe ich ja per CSS so festgelegt.
Durch den focus (von 1000) wird es wieder zurückgeholt.

Der Bezugspunkt bei den Positionsangaben ist immer das Elternelement, d.h. ich habe es erst von der Oberkante nach oben verschoben und dann wieder an die gleiche Stelle zurückgeholt.

Das konnte ich durch nur Lesen auch nicht begreifen, ich habe das öfter mal ausprobiert und mit den Werten gespielt.
Das Verständnis kam trotzdem erst nach und nach bei mir.

Sehr lange fand ich das sehr unlogisch.

Vieleicht noch mal meine Vorstellung:

Ein Elternelement der Skiplinks bekommt position:relative, damit ist sicher gestellt, dass sich die Positionsangaben der Links an diesem Elternelement ausrichten, das Elternelement stellt quasi das Koordinatensystem dar.


.skiplink {
top:-1000px;
}
Das bedeutet, ich schiebe den Link 1000px von der Oberkante des Elternelements aus nach oben. Bezugspunkt ist – logisch – das Elternelement!


.skiplink:focus {
top:1000px;
}

Diese Angabe müsste ja dann bedeuten, dass ich von der Oberkante des Elternelements 1000px nach unten gehe. Aber hier scheint sich das Verhalten zu ändern, denn jetzt ist ja nicht mehr das Elternelement der Bezugspunkt, sondern das Element selbst in seiner ursprünglichen Positionierung. Warum?

mmmh…, also wenn du nichts definierst, dann gilt left:0; und top:0; von body bzw. dem Elternelement (wenn es position:relative; hat!) von den Skiplinks.
Das ist die linke obere Ecke von body oder dem Elternelement.
Per CSS werden die Skiplinks dann um -9999px von Null aus verschoben.
Damit sie beim Durchtabben wieder auf Null landen, muss ich sie ja von den -9999px wieder zurückholen.
Wenn ich sie vorher mit -9999px rausgeschoben habe, muss ich sie durch den Wert +9999px wieder zurückholen, damit sie wieder bei Null landen.
-9999 und +9999 = 0

Sollte ich z.B. für das Zurückholen bei left:10100px eintragen entspricht das left:101px. Der Skiplink wird dann nicht ganz links oben eingeblendet sondern um 101px nach rechts verschoben.

Jetzt etwas klarer?

Jetzt muss ich kurz mal nachfragen:
Die Positionsangaben bei den Pseudoklassen beziehen sich doch in dem Fall auf den body, unabhängig von den zuvor gesetzten werten. Also ist 9999px für top und left doch etwas viel, oder?

Zuerst wird der Skiplink mit -9999px aus dem Viewport geschoben und beim Tabben durch 9999px wieder genau an die Stelle zurückgeschoben, wo er stehen würde, wenn er nicht rausgeschoben worden wäre. (Klingt wie von hinten durch die Brust ins Auge. )

Bei position:absolute ist der Bezugspunkt ja body, wenn du dem umgebenden Container kein position:relative gibst,also würden die Skiplinks dann ganz oben links im sichtbaren Bereich erscheinen.

Ich gebe dem Header und dem Footer immer position:relative;, damit die jeweiligen Skiplinks im entsprechenden Container erscheinen.
Du kannst natürlich den Wert für top/left bei .skiplinktabs verändern, damit die Skiplinks an der gewünschten Stelle im jeweiligen Container erscheinen.
Sollten es für Header und Footer unterschiedliche Stellen sein dann brauchst du für die skiplinktabs noch eine Klasse mehr, z.B. .skiplinktabs_fuss.