W3docs
de
Anmelden

CSS right-Eigenschaft

So wird die CSS-Eigenschaft right verwendet, um die rechte Position eines Elements festzulegen. Eigenschaftswerte und Praxisbeispiele.

Die CSS-Eigenschaft right legt den horizontalen Versatz eines positionierten Elements fest — also wie weit sein rechter Rand von einer Referenzkante entfernt ist. Allein bewirkt sie nichts; sie greift erst, wenn dem Element ein position-Wert zugewiesen wurde, der sich vom Standard static unterscheidet.

Diese Seite erklärt, wie sich right unter den verschiedenen Positionierungsarten verhält, wie es mit left zusammenwirkt und welche typischen Fallstricke es zu beachten gilt.

So funktioniert right

Die Referenzkante, von der right misst, hängt vollständig vom position-Wert des Elements ab:

  • absolute oder fixed — right ist der Abstand zwischen dem rechten Rand des Elements und dem rechten Rand seines umgebenden Blocks (bei absolute der nächste positionierte Vorfahre; bei fixed das viewport).
  • relative — right verschiebt das Element nach links von seiner normalen Position um den angegebenen Betrag, während der ursprünglich belegte Raum erhalten bleibt. (Der Name ist kontraintuitiv: Ein positiver right-Wert bewegt das Element weg vom rechten Rand, also nach links.)
  • sticky — right ist der Abstand vom rechten Rand des Scroll-Containers, bei dem das Element beim Scrollen „klebt".
  • static — right hat keinerlei Auswirkung.
Info

Wenn position auf static (dem Standard) gesetzt ist, wird right ignoriert. Setzen Sie zunächst position: relative, absolute, fixed oder sticky.

right vs. left

Wenn Sie sowohl left als auch right für dasselbe Element festlegen, hängt das Ergebnis von width und der Schreibrichtung ab:

  • Bei width: auto dehnt sich das Element, um beide Versatzwerte zu erfüllen — nützlich, um ein Element in einem festen Abstand von beiden Seiten seines Containers zu fixieren.
  • Bei einer festen width würden die beiden Werte das Element überbestimmen. Bei einem Links-nach-rechts-Text gewinnt left und right wird ignoriert; bei einem Rechts-nach-links-Text gewinnt right.

Wenn Sie nur einen horizontalen Versatz benötigen, setzen Sie nur left oder nur right und lassen Sie den anderen auf auto.

Anfangswertauto
Gilt fürPositionierte Elemente.
VererbtNein.
AnimierbarJa. Die Position des Elements ist animierbar.
VersionCSS2
DOM-SyntaxObject.style.right = "50px";

Syntax

right: auto | length | percentage | initial | inherit;

Beispiele

Beispiel mit einem px-Wert

Hier wird das Bild mit position: absolute aus dem normalen Fluss herausgenommen und 35px vom rechten Rand der Seite fixiert.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>
Probier es selbst »

Ergebnis

CSS right-Eigenschaft

Beispiel mit einem %-Wert

Ein Prozentwert wird gegen die Breite des umgebenden Blocks aufgelöst, sodass right: 30% den Versatz proportional beibehält, wenn die Größe des Containers sich ändert.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 100%;
        background-color: #ccc;
        color: #ffffff;
      }
      img {
        position: absolute;
        right: 30%;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>
Probier es selbst »

Beispiel mit dem initial-Wert

initial setzt right auf seinen Standardwert auto zurück und lässt den Browser den rechten Rand automatisch anhand der anderen Versatzwerte und der Größe des Boxes bestimmen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        max-width: 300px;
        line-height: 20px;
      }
      p {
        position: absolute;
        right: initial;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <div>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
      <p>Some text</p>
    </div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
autoLegt die Position des rechten Rands fest. Dies ist der Standardwert der Eigenschaft.Ausprobieren »
lengthLegt die Position des rechten Rands mit px, em, rem usw. fest. Negative Werte sind erlaubt.Ausprobieren »
%Legt die Position des rechten Rands als Prozentsatz des umgebenden Elements fest. Negative Werte sind erlaubt.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert (auto) zurück, sodass der Browser die Position automatisch berechnet.Ausprobieren »
inheritErbt die Eigenschaft vom Elternelement.

Verwandte Eigenschaften

Die Eigenschaft right ist eine von vier Einfüge-Eigenschaften, die zusammen mit position verwendet werden:

  • left — versetzt den linken Rand des Elements.
  • top — versetzt den oberen Rand des Elements.
  • bottom — versetzt den unteren Rand des Elements.

Übung

Übung
Welche Rolle spielt die 'right'-Eigenschaft in CSS?
Welche Rolle spielt die 'right'-Eigenschaft in CSS?
Was this page helpful?