CSS `right`-Eigenschaft

Die right-Eigenschaft gibt einen Teil der Position von positionierten Elementen an.

Für absolut oder fest positionierte Elemente gibt die right-Eigenschaft den Abstand zwischen der rechten Kante des Elements und der rechten Kante seines Containings-Blocks an.

INFO

Wenn position auf static gesetzt ist, hat die right-Eigenschaft keine Auswirkung.

Die Wirkung von right hängt von der Positionierung des Elements ab (siehe position-Eigenschaft):

Wenn position auf absolute oder fixed gesetzt ist, gibt die right-Eigenschaft den Abstand zwischen der rechten Kante des Elements und der rechten Kante seines Containings-Blocks an.
Wenn position auf relative gesetzt ist, gibt die right-Eigenschaft den Abstand an, um den die rechte Kante des Elements von ihrer normalen Position nach rechts verschoben wird.
Wenn position auf sticky gesetzt ist, gibt die right-Eigenschaft den Abstand zur rechten Kante des Viewports an, wenn das Element sticky wird.
Wenn position auf static gesetzt ist, hat die Eigenschaft keine Auswirkung.

Anfangswert	auto
Gilt für	Positionierte Elemente.
Vererbbar	Nein.
Animierbar	Ja. Die Position des Elements ist animierbar.
Version	CSS2
DOM-Syntax	Object.style.right = "50px";

Syntax

Syntax der CSS right-Eigenschaft

css

right: auto | length | initial | inherit;

Beispiel mit `px`-Wert

html

<!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://de.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>

Try it Yourself »

Ergebnis

CSS -Eigenschaft

Beispiel mit `%`-Wert

html

<!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://de.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>

Try it Yourself »

Beispiel mit `initial`-Wert

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
auto	Legt die Position der rechten Kante fest. Dies ist der Standardwert dieser Eigenschaft.	Ausführen »
length	Legt die Position der rechten Kante mit px, em, rem usw. fest. Negative Werte sind erlaubt.	Ausführen »
%	Legt die Position der rechten Kante in % des Containings-Elements fest. Negative Werte sind erlaubt.	Ausführen »
initial	Setzt die Eigenschaft auf ihren Standardwert (`auto`), wodurch der Browser die Position automatisch berechnet.	Ausführen »
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Welche Rolle spielt die 'right'-Eigenschaft in CSS?

Es wird verwendet, um einen Block oder eine gesamte Textzeile nach rechts von ihrer üblichen Position zu verschieben.Es verschiebt die rechte Kante eines Elements nach rechts auf dem Bildschirm.Es verschiebt die rechte Kante eines Elements nach links auf dem Bildschirm.Es wird verwendet, um die obere Kante eines Elements in einem bestimmten Abstand von der rechten Kante seines Containings-Elements zu positionieren.Es kann die Position anderer Elemente beeinflussen.Es ist nur wirksam, wenn die position-Eigenschaft 'static' ist.Es ist nur wirksam, wenn die position-Eigenschaft 'absolute', 'fixed', 'relative' oder 'sticky' ist.

CSS right-Eigenschaft ​

Syntax ​

Beispiel mit px-Wert ​

Ergebnis ​

Beispiel mit %-Wert ​

Beispiel mit initial-Wert ​

Werte ​

Praxis ​

CSS `right`-Eigenschaft

Syntax

Beispiel mit `px`-Wert

Ergebnis

Beispiel mit `%`-Wert

Beispiel mit `initial`-Wert

Werte

Praxis