`right` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die right CSS Eigenschaft nimmt an der Spezifikation der horizontalen Position eines positionierten Elements teil. Diese Einsatz-Eigenschaft hat keine Auswirkung auf nicht positionierte Elemente.

Probieren Sie es aus

right: 0;

right: 4em;

right: 10%;

right: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Syntax

css

/* <length> values */
right: 3px;
right: 2.4em;
right: anchor(--my-anchor 50%);
right: anchor-size(--my-anchor height, 65px);

/* <percentage>s of the width of the containing block */
right: 10%;

/* Keyword value */
right: auto;

/* Global values */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

Werte

<length>

Eine negative, null oder positive <length>:

für absolut positionierte Elemente stellt es die Distanz zur rechten Kante des enthaltenden Blocks dar.
für Anker-positionierte Elemente wird die anchor()-Funktion zu einem <length>-Wert aufgelöst, relativ zur Position der assoziierten Anker-Element-Kante links oder rechts (siehe Verwendung der Einsatz-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion wird zu einem <length>-Wert aufgelöst, relativ zur Breite oder Höhe des assoziierten Anker-Elements (siehe Einstellung der Elementposition basierend auf Ankergröße).
für relativ positionierte Elemente stellt es die Distanz dar, die das Element von seiner normalen Position nach links verschoben wird.

<percentage>

Ein <percentage> der Breite des enthaltenen Blocks.

auto

Gibt an, dass:

für absolut positionierte Elemente die Position des Elements auf der left-Eigenschaft basiert, 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 platziert würde, wenn es ein statisches Element wäre.
für relativ positionierte Elemente der Abstand des Elements von seiner normalen Position auf der left-Eigenschaft basiert; oder wenn left ebenfalls auto ist, wird das Element horizontal überhaupt nicht verschoben.

Beschreibung

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 den Abstand zwischen dem äußeren Rand der rechten Kante des Elements und dem inneren Rand der rechten Kante des enthaltenen Blocks an. Wenn das positionierte Element ein assoziiertes Anker-Element hat, und der Eigenschaftswert eine anchor()-Funktion enthält, 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 den Abstand an, den die rechte Kante des Elements von ihrer normalen Position nach links verschoben wird.
Wenn position auf sticky gesetzt ist, wird die right-Eigenschaft verwendet, um das sticky-constraint Rechteck zu berechnen.
Wenn position auf static gesetzt ist, hat die right-Eigenschaft keine Wirkung.

Wenn sowohl left als auch right definiert sind, wird das Element, sofern nicht durch andere Eigenschaften verhindert, gedehnt, um beide zu erfüllen. Kann das Element nicht gedehnt werden, um beide zu erfüllen – z.B. wenn eine width angegeben ist – ist die Position des Elements überbestimmt. In diesem Fall hat der left-Wert Vorrang, wenn das Container von links nach rechts ist; der right-Wert hat Vorrang, wenn das Container von rechts nach links ist.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	positionierte Elemente
Vererbt	Nein
Prozentwerte	bezieht sich auf die Breite des äußeren Elements
Berechneter Wert	falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten `auto`
Animationstyp	Längenangabe, Prozentsatz oder `calc()`;

Formale Syntax

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

Beispiele

Absolute und relative Positionierung unter Verwendung von `right`

HTML

html

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

CSS

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

Deklarierung von `left` und `right`

Wenn sowohl left als auch right deklariert sind, wird das Element gedehnt, um beide zu erfüllen, es sei denn, andere Einschränkungen verhindern dies. Wenn das Element weder gedehnt noch verkleinert wird, um beide zu erfüllen. Wenn die Position des Elements überbestimmt ist, basiert der Vorrang auf der Richtung des Containers: left hat Vorrang, wenn die Richtung des Containers von links nach rechts ist. right hat Vorrang, wenn die Richtung des Containers von rechts nach links ist.

HTML

html

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

CSS

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;
}