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, nuller oder positiver <length>:

• für absolut positionierte Elemente repräsentiert er die Entfernung zur rechten Kante des enthaltenden Blocks.
• für anker-positionierte Elemente löst die anchor()-Funktion auf einen <length>-Wert relativ zur Position der linken oder rechten Kante des zugehörigen Ankerelements auf (siehe Using inset properties with anchor() function values), und die anchor-size()-Funktion löst auf einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Setting element position based on anchor size).
• für relativ positionierte Elemente repräsentiert er die Entfernung, um die das Element von seiner normalen Position nach links verschoben wird.

<percentage>

Ein <percentage> der Breite des enthaltenden Blocks.

auto

Gibt an, dass:

• für absolut positionierte Elemente die Position des Elements basierend auf der left-Eigenschaft festgelegt wird, während width: auto als Breite basierend auf dem Inhalt behandelt wird; oder falls left ebenfalls auto ist, wird das Element dort positioniert, wo es horizontal positioniert werden würde, wenn es ein statisches Element wäre.
• für relativ positionierte Elemente die Distanz des Elements von seiner normalen Position basierend auf der left-Eigenschaft festgelegt wird; oder falls 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 die Entfernung zwischen dem äußeren Rand der rechten Kante des Elements und dem inneren Rand der rechten Kante seines enthaltenden Blocks an. Wenn das positionierte Element ein zugehöriges Ankerelement 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 die Entfernung an, um die 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-Einschränkungsrechteck zu berechnen.
• Wenn position auf static gesetzt ist, hat die right-Eigenschaft keine Auswirkung.

Wenn sowohl left als auch right definiert sind, wird das Element, wenn es nicht durch andere Eigenschaften daran gehindert wird, gedehnt, 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 von links nach rechts verläuft; der right-Wert hat Vorrang, wenn das Container von rechts nach links verläuft.

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

Absolute und relative Positionierung 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

Deklaration von sowohl left als auch right

Wenn sowohl left als auch right deklariert werden, wird das Element gedehnt, um beiden zu entsprechen, es sei denn, andere Einschränkungen verhindern dies. Wenn das Element weder gedehnt noch geschrumpft wird, um beiden zu entsprechen. 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

<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 Kurzform
• inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
• inset-block und inset-inline Kurzformen
• position
• CSS positioniertes Layout Modul