Was wäre, wenn es keine Position gäbe: Statisch;?

Alle Elemente in allen Browsern beginnen mit dem Standardwert für die Positionierung statisch. Sie werden diesen Wert selten in einer tatsächlichen Stylesheet sehen, daher ist das Wort vielleicht nicht sehr bekannt. Es ist auch gut so, denn das Wort selbst ist nicht sehr hilfreich, um zu verstehen, was es bedeutet. Sie könnten denken, dass es das Element klebrig macht, so wie wenn man einen Ballon an den Kopf reibt und ihn an die Wand klebt (statische Elektrizität). Eigentlich bedeutet es, dass das Element im normalen Dokumentenfluss fällt, im Gegensatz zu anderen Positionierungswerten, die das Element aus dem natürlichen Dokumentenfluss entfernen können.

Nehmen wir nun ein Element in seinem standardmäßigen statischen Zustand und machen es zu position: relative;. Was passiert? Allein durch die Änderung/Festlegung dieses Wertes passiert nichts. Es erscheint an genau derselben Stelle wie vor der Änderung. Was sich ändert, sind diese drei Dinge:

1. Sie können nun die Position des Elements mit den Werten oben/rechts/unten/links verschieben. Der ursprüngliche Platz wird jedoch immer noch von dem Element eingenommen (als ob ein Geist des ursprünglichen Elements dort wäre und Platz einnehmen würde).
2. Das Element wird nun die z-index-Eigenschaft berücksichtigen, die steuert, welche Elemente bei Überlappung oben erscheinen sollen.
3. Wenn das Element Kindelemente hat, die absolut positioniert sind, sind diese nun absolut innerhalb des Kontexts dieses Elements positioniert.

Relative Positionierung *ermöglicht* also einige Funktionen und Eigenschaften, tut aber für sich genommen nicht viel. Was wäre also, wenn alle Elemente einfach mit position: relative; anstatt position: static; beginnen würden?

Vorteile

Wenn alle Elemente mit relativer Positionierung beginnen würden, hätten Sie alle drei oben genannten Punkte von Natur aus. Ihre oben/rechts/unten/links-Werte funktionieren wie erwartet. Z-index funktioniert auch "einfach". Der Positionierungskontext ist immer auf das nächste Elternelement beschränkt, was logisch sinnvoll ist.

Ich denke, insgesamt wird CSS verständlicher.

Nachteile

Besonders einschränkend ist die *ständige* Beschränkung des Positionierungskontextes auf das Elternelement. Nehmen wir an, Sie möchten ein Element oben rechts auf der Seite positionieren, unabhängig davon, wo das Element im Markup erscheint. Das wird schwierig, wenn das Element tief in der Hierarchie vergraben ist. Sie müssen den Positionierungskontext für jedes Elternelement zurücksetzen. Das bedeutet, sie auf position: static; zurückzusetzen und dabei alle Vorteile der relativen Positionierung zu verlieren. =(

Wenn die natürliche relative Positionierung jemals Realität würde, bräuchten wir meiner Meinung nach eine andere Methode zur Handhabung von Positionierungskontexten. Möglicherweise so wie

/* Not real code */

#parent-element {
  context: inherit | pass | accept;
}

So machen wir es heute

Würde bedeuten

* {
  position: relative;
}

Also…

Es wird wahrscheinlich nicht passieren. Dies wäre eine ziemlich heftige abwärtskompatible Änderung mit begrenzten/fragwürdigen Vorteilen. Es ist auch schwer zu sagen, was wir im Durchschnitt mehr tun würden: Position relativ setzen oder Positionierungskontexte zurücksetzen. Ich denke, es ist einfach interessant, darüber nachzudenken.