From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/position_value/index.html | 86 ++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 files/de/web/css/position_value/index.html (limited to 'files/de/web/css/position_value/index.html') diff --git a/files/de/web/css/position_value/index.html b/files/de/web/css/position_value/index.html new file mode 100644 index 0000000000..6ed01c98ab --- /dev/null +++ b/files/de/web/css/position_value/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: Web/CSS/position_value +tags: + - CSS + - CSS Datentyp + - Layout + - Referenz + - Web +translation_of: Web/CSS/position_value +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Der <position> CSS Datentyp beschreibt eine Koordinate im 2D-Raum, die dazu verwendet wird, die Position relativ zu einer Box zu setzen.

+ +

Eine bestimmte Position kann durch zwei Schlüsselwörter mit bestimmten Versätzen angegeben werden. Ein Schlüsselwort repräsentiert einen Rand der Elementbox oder die Mittellinie zwischen zwei Rändern: left, right, top, bottom oder center (was entweder die Mitte zwischen dem linken und rechten Rand repräsentiert oder die Mitte zwischen dem oberen und unteren Rand, abhängig vom Kontext).

+ +

{{experimental_inline}}Ein Versatz kann entweder ein relativer Wert sein, ausgedrückt durch einen {{cssxref("<percentage>")}} Wert, oder ein absoluter {{cssxref("<length>")}} Wert. Positive Werte werden nach rechts oder unten versetzt, je nachdem, was zutrifft. Negative Werte werden in die anderen Richtungen versetzt.

+ +

Die endgültige Position, die durch den <position> Wert beschrieben wird, muss nicht innerhalb der Elementbox liegen.

+ +

Falls ein Versatz ohne zugehöriges Schlüsselwort angegeben wurde, wird für es center angenommen.

+ +

Interpolation

+ +

Die Werte für die Abzisse und die Ordinate werden unabhängig voneinander interpoliert. Da die Geschwindigkeit für beide durch dieselbe {{cssxref("<timing-function>")}} definiert wird, folgt der Punkt einer Linie.

+ +

Werte

+ +
/* 1-Wert-Syntax */
+Schlüsselwort                  /* Der zugehörige Rand, die andere Richtung verweist auf center, die Mitte des Randes. */
+<length> oder <percentage> /* Die Position auf der x-Achse, 50% für die y-Achse. */
+
+/* 2-Werte-Syntax */
+Schlüsselwort Schlüsselwort          /* Ein Schlüsselwort für jede Richtung, die Reihenfolge ist unwichtig. */
+Schlüsselwort Wert            /* Der Wert ist der Versatz für den Rand, der durch das Schlüsselwort definiert wird. */
+
+ +

Formale Syntax

+ +
[ [ left | center | right | top | bottom | <percentage> | <length> ] |
+                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
+                  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
+                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
+                ]
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Listed die Links zu beiden Definitionen auf mit der Voraussetzung, dass diese koherent sind: falls {{SpecName('CSS3 Backgrounds')}} unterstützt wird, muss deren Definition von <position> ebenfalls verwendet werden.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}Definiert <position> explizit und erweitert es um die Unterstützung von Versätzen von einem beliebigen Rand.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Erlaubt die Kombination von einem Schlüsselwort mit einem {{cssxref("<length>")}} oder einem {{cssxref("<percentage>")}} Wert.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}Definiert <position> anonym als Wert von {{cssxref("background-position")}}.
+ +

Browser Kompatibilität

+ +{{Compat("css.types.position")}} -- cgit v1.2.3-54-g00ecf