<position>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Der <position> CSS Datentyp bezeichnet eine zweidimensionale Koordinate, die verwendet wird, um eine Position relativ zu einem Elementkasten festzulegen. Er wird in den Eigenschaften background-position, object-position, mask-position, offset-position, offset-anchor und transform-origin verwendet.

Hinweis: Die durch den <position>-Wert beschriebene endgültige Position muss sich nicht innerhalb des Elementkastens befinden.

Syntax

Raster zeigt die Platzierung verschiedener Werte. 0 0 ist die obere linke Ecke. Die vier Werte, right, right center, center left 100%, und top 50% left 100%, sind alle gleichwertig und befinden sich an der rechten Kante in der Mitte vertikal. Die beiden Werte, top 75px left 100px und left 100px top 75px, sind identisch. Bottom left 25% ist dasselbe wie top 100% left 25%.

Der <position> Datentyp wird mit einem oder zwei Schlüsselwörtern angegeben, mit optionalen Offsets.

Die Schlüsselwortwerte sind center, top, right, bottom und left. Jedes Schlüsselwort steht entweder für eine Kante des Elementkastens oder die Mittellinie zwischen zwei Kanten. Je nach Kontext repräsentiert center entweder die Mitte zwischen den linken und rechten Kanten oder die Mitte zwischen den oberen und unteren Kanten.

Wenn angegeben, kann ein Offset entweder ein relatives <percentage> Wert oder ein absoluter <length> Wert sein. Positive Werte werden nach rechts oder unten verschoben, je nachdem, was für den Kontext zutrifft. Negative Werte werden in die entgegengesetzte Richtung verschoben.

Wenn nur ein einzelner Offset-Wert angegeben wird, definiert er die x-Koordinate, wobei der Wert für die andere Achse standardmäßig auf center gesetzt wird.

css
/* 1-value syntax */
keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
value                    /* The position on the x-axis; the y-axis defaults to 50% */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction (the order is irrelevant) */
keyword value            /* A keyword for horizontal position, value for vertical position */
value keyword            /* A value for horizontal position, keyword for vertical position */
value value              /* A value for each direction (horizontal then vertical) */

/* 4-value syntax */
keyword value keyword value /* Each value is an offset from the keyword that precedes it */

Hinweis: Die Eigenschaft background-position akzeptiert auch eine Syntax mit drei Werten. Dies ist bei anderen Eigenschaften, die <position> verwenden, nicht erlaubt.

Interpolation

Wenn animiert, werden die Abszissen- und Ordinatenwerte eines Punktes unabhängig voneinander interpoliert. Da die Geschwindigkeit der Interpolation jedoch durch eine einzige Easing-Funktion für beide Koordinaten bestimmt wird, bewegt sich der Punkt in einer geraden Linie.

Formale Syntax

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Gültige Positionen

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px

Ungültige Positionen

left right
bottom top
10px 15px 20px 15px

Spezifikationen

Specification
CSS Values and Units Module Level 4
# position

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch