<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 Elementrahmen 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 Endposition muss sich nicht innerhalb des Elementrahmens befinden.
Syntax
Der <position>
Datentyp wird mit einem oder zwei Schlüsselwörtern, mit optionalen Offsets angegeben.
Die Schlüsselwortwerte sind center
, top
, right
, bottom
und left
. Jedes Schlüsselwort repräsentiert entweder eine Kante des Elementrahmens oder die Mittellinie zwischen zwei Kanten. Abhängig vom Kontext repräsentiert center
entweder die Mitte zwischen der linken und rechten Kante oder die Mitte zwischen der oberen und unteren Kante.
Falls angegeben, kann ein Offset entweder ein relativer <percentage>
Wert oder ein absoluter <length>
Wert sein. Positive Werte sind Versätze nach rechts oder unten, je nach Kontext. Negative Werte sind Versätze in die entgegengesetzten Richtungen.
Wenn nur ein einzelner Offset-Wert angegeben wird, definiert dieser die x-Koordinate, wobei der Wert für die andere Achse standardmäßig auf center
gesetzt wird.
/* 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 Drei-Werte-Syntax. Dies ist in anderen Eigenschaften, die <position>
verwenden, nicht erlaubt.
Interpolation
Bei Animationen werden die Abszissen- und Ordinatenwerte eines Punktes unabhängig voneinander interpoliert. Da jedoch die Geschwindigkeit der Interpolation von einer einzigen 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