right

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die right CSS-Eigenschaft beteiligt sich an der Bestimmung der horizontalen Position eines positionierten Elements. Diese Einpassungseigenschaft 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(--myAnchor 50%);
right: anchor-size(--myAnchor 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>:

<percentage>

Ein <percentage> der Breite des umgebenden Blocks.

auto

Gibt an, dass:

  • für absolut positionierte Elemente die Position des Elements basierend auf der left-Eigenschaft erfolgt, 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 der Abstand des Elements von seiner normalen Position basierend auf der left-Eigenschaft erfolgt; oder wenn left ebenfalls auto ist, wird das Element überhaupt nicht horizontal 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 seines umgebenden Blocks an. Hat das positionierte Element ein zugehöriges Ankerelement, und der Eigenschaftswert enthält eine anchor()-Funktion, positioniert right die rechte Kante des positionierten Elements relativ zu der 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, um den die rechte Kante des Elements nach links von ihrer normalen Position 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, falls nicht durch andere Eigenschaften verhindert, so gestreckt, dass beide erfüllt werden. Wenn das Element nicht gestreckt werden kann, um beide zu erfüllen — 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 läuft; der right-Wert hat Vorrang, wenn das Container von rechts nach links läuft.

Formale Definition

Anfangswertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertfalls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
AnimationstypLä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 mit 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

Deklaration von both left and right

Wenn sowohl left als auch right deklariert sind, wird das Element gestreckt, um beide zu erfüllen, es sei denn, andere Einschränkungen verhindern dies. Wenn das Element nicht gestreckt oder geschrumpft wird, um beide zu erfüllen. Wenn die Position des Elements überbestimmt ist, basiert der Vorrang auf der Richtung des Containers: Der left-Wert hat Vorrang, wenn die Richtung des Containers von links nach rechts ist. Der right-Wert 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;
}

Ergebnis

Spezifikationen

Specification
CSS Positioned Layout Module Level 3
# insets

Browser-Kompatibilität

Siehe auch