Inset-Eigenschaften

In CSS steuern inset-Eigenschaften die Position von positionierten Elementen, indem sie Verschiebungen von den Standardpositionen der Elemente festlegen. Es gibt physische, logische und Kurzform-Inset-Eigenschaften.

Zu den inset-Eigenschaften gehören die physischen Eigenschaften top, left, bottom und right, ihre flussrelativen logischen Eigenschaft Äquivalente inset-block-start, inset-block-end, inset-inline-start und inset-inline-end, sowie die Kurzformen inset-block, inset-inline und inset.

Physische Eigenschaften beziehen sich auf spezifische physische Seiten eines Elements. Logische Eigenschaften verwenden Richtungsschlüsselwörter relativ zu den Block- und Inline-Achsen. Die Block-Achse bezieht sich auf die Achse, die die Stapelreihenfolge von Elementen in einem Block-Layout definiert. Die Inline-Achse steht senkrecht zur Block-Achse und repräsentiert die Richtung, entlang derer Inline-Inhalte wie Text innerhalb eines Blocks fließen. Die Zuordnung hängt ab vom writing-mode, direction und text-orientation des Elements.

Die Interpretation von Inset-Eigenschaften hängt vom Wert der position Eigenschaft ab. Wenn position: absolute festgelegt ist, repräsentieren sie Insets vom enthältenden Block oder Anker-Element. Mit position: relative stellen sie Insets von der Standard-Randkante der Box dar. Bei sticky repräsentieren sie Insets von der Kante des Scroll-Containers. Der Wert fixed ähnelt absolute, außer dass das Element relativ zu seinem enthaltenen Fixblock positioniert und skaliert wird, der oft der Viewport ist.