Relative Position
Neben display beeinflusst auch die Eigenschaft position das Layout einer Seite. Um klar zu sehen, was sie macht, probieren wir sie eine Weile an einer einfachen Seite mit drei Quadraten aus. Zur Katzenseite kommen wir später zurück.
Der Standardwert von position ist static. Ein statisches Element bleibt genau dort, wo der normale Fluss es hinsetzt. Alle Elemente, die du bisher gesehen hast, waren statisch.
Ein Element mit position: relative bleibt ebenfalls im normalen Fluss, aber anders als ein statisches kann es mit den Eigenschaften top, right, bottom und left von seinem Platz verschoben werden, den sogenannten Offsets (Verschiebungen). Jede Verschiebung sagt, wie weit sich das Element von dieser Seite seines ursprünglichen Platzes entfernt: top: 30px verschiebt es 30 Pixel nach unten, left: 30px 30 Pixel nach rechts.
Die anderen Elemente bemerken die Verschiebung nicht. Sie verhalten sich, als wäre das Element noch an seinem ursprünglichen Platz, sein Platz bleibt also leer.
Im Editor sind die Quadrate div-Elemente mit display: inline-block, sie stehen also in einer Reihe. Das zweite hat die ID quadrat2.