right

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

/* <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>

Ein negativer, null oder positiver <length>:

• Für absolut positionierte Elemente stellt es die Entfernung zur rechten Kante des umgebenden Blocks dar.
• Für ankerpositionierte Elemente wird die anchor()-Funktion auf einen <length>-Wert relativ zur Position der linken oder rechten Kante des zugehörigen Ankerelements aufgelöst (siehe Verwendung von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion wird auf einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Festlegen der Elementposition basierend auf der Ankergröße).
• Für relativ positionierte Elemente stellt es die Entfernung dar, um die das Element von seiner normalen Position nach links verschoben wird.

<percentage>

Ein <percentage> der Breite des umgebenden 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 positioniert werden sollte, wenn es ein statisches Element wäre.
• Für relativ positionierte Elemente basiert die Entfernung des Elements von seiner normalen Position auf der left-Eigenschaft; oder wenn left ebenfalls auto ist, wird das Element horizontal überhaupt nicht bewegt.

Beschreibung

Die Wirkung von right hängt davon ab, wie das Element positioniert ist (d.h. vom 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 der inneren Grenze der rechten Kante seines umgebenden Blocks an. Wenn das positionierte Element ein zugehöriges Ankerelement hat und der Eigenschaftswert eine anchor()-Funktion enthält, positioniert right den rechten Rand 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, um die der rechte Rand des Elements von seiner 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, dehnt sich das Element aus, um beide zu erfüllen, sofern es nicht durch andere Eigenschaften daran gehindert wird. Wenn das Element nicht gedehnt werden kann, um beide zu erfüllen — beispielsweise wenn eine width deklariert ist — ist die Position des Elements überbestimmt. In diesem Fall hat der left-Wert Vorrang, wenn das Container-Fließrichtung links-nach-rechts ist; der right-Wert hat Vorrang, wenn das Container-Fließrichtung rechts-nach-links ist.

Formale Definition

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

Absolut und relativ positionieren mit right

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

Sowohl left als auch right deklarieren

Wenn sowohl left als auch right deklariert sind, dehnt sich das Element aus, um beide zu erfüllen, es sei denn, andere Einschränkungen verhindern dies. Wenn das Element sich nicht so dehnen oder verkleinern kann, um beide zu erfüllen. Wenn die Position des Elements überbestimmt 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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-Positionierlayout Modul