right

<length>

Eine negative, null oder positive <length>, die repräsentiert:

• für absolut positionierte Elemente, die Entfernung zum rechten Rand des umgebenden Blocks.
• für anker-positionierte Elemente, die anchor() Funktion löst sich auf einen <length> Wert relativ zur Position des zugehörigen linken oder rechten Rands des Ankerelements auf.
• für relativ positionierte Elemente, die Entfernung, die das Element links von seiner normalen Position verschoben wird.

<percentage>

Ein <percentage> der Breite des umgebenden Blocks.

auto

Gibt an, dass:

• für absolut positionierte Elemente, die Position des Elements basiert auf der left Eigenschaft, während width: auto als Breite basierend auf dem Inhalt behandelt wird; oder wenn left ebenfalls auto ist, wird das Element dort positioniert, wo es horizontal positioniert sein sollte, wenn es ein statisches Element wäre.
• für relativ positionierte Elemente, die Entfernung des Elements von seiner normalen Position basiert auf der left Eigenschaft; oder wenn left auch auto ist, wird das Element überhaupt nicht horizontal verschoben.

inherit

Gibt an, dass der Wert derselbe ist wie der berechnete Wert von seinem Elternelement (das möglicherweise nicht der umgebende Block ist). Dieser berechnete Wert wird dann behandelt, als ob es ein <length>, <percentage> oder das auto Schlüsselwort wäre.

Die Wirkung von right hängt davon ab, wie das Element positioniert ist (d. h. der Wert der position Eigenschaft):

• Wenn position auf absolute oder fixed gesetzt ist, gibt die right Eigenschaft die Entfernung zwischen der äußeren rechten Kante des Elements und der inneren rechten Kante seines umgebenden Blocks an. Wenn das positionierte Element ein zugehöriges Ankerelement hat und der Eigenschaftswert eine anchor() Funktion umfasst, positioniert right die rechte Kante des positionierten Elements relativ zur angegebenen <anchor-side> Kante. Die right Eigenschaft ist kompatibel mit den Werten left, right, start, end, self-start, self-end, center und <percentage>.
• Wenn position auf relative gesetzt ist, gibt die right Eigenschaft die Entfernung an, die die rechte Kante des Elements links von seiner normalen Position verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die right Eigenschaft zur Berechnung des klebrigen Begrenzungsrechtecks verwendet.
• Wenn position auf static gesetzt ist, hat die right Eigenschaft keine Auswirkung.

Wenn sowohl left als auch right definiert sind, und dies nicht durch andere Eigenschaften verhindert wird, wird das Element sich dehnen, um beiden zu entsprechen. Wenn das Element nicht gedehnt werden kann, um beiden zu entsprechen — zum Beispiel, wenn eine width deklariert ist — ist die Position des Elements überbestimmt. In diesem Fall hat der left Wert Vorrang, wenn das Container links-nach-rechts ausgerichtet ist; der right Wert hat Vorrang, wenn das Container rechts-nach-links ausgerichtet ist.

right = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

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

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

HTML

<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>

CSS

#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

Ergebnis

Wenn sowohl left als auch right deklariert sind, wird das Element sich dehnen, um beiden zu entsprechen, es sei denn, andere Einschränkungen verhindern dies. Wenn das Element sich nicht dehnen oder schrumpfen wird, um beiden zu entsprechen. Wenn die Position des Elements überspezifiziert ist, basiert die Priorität auf der Richtung des Containers: Das left wird Vorrang haben, wenn die Richtung des Containers links-nach-rechts ist. Das right wird Vorrang haben, wenn die Richtung des Containers rechts-nach-links ist.

HTML

<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>

CSS

div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/* declare both a left and a right */
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/* declare a width */
#width {
  width: 100px;
  top: 60px;
}

Ergebnis

• top, bottom, und left
• inset Kurzschreibweise
• inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
• inset-block und inset-inline Kurzschreibweisen
• position
• CSS-positioniertes Layout Modul