CSS-Eigenschaft right

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

Die Eigenschaft right wird verwendet, um den rechten Rand des Elements und den rechten Rand seines enthaltenden Blocks für absolut oder fest positionierte Elemente festzulegen.

Wenn die Position "static" gewählt wird, hat die Eigenschaft right keine Wirkung.

Der Effekt von right hängt davon ab, wie das Element positioniert ist (die Eigenschaft position ansehen).

  • Wenn die Position auf "absolute" oder "fixed" eingestellt ist, gibt die Eigenschaft right den Abstand zwischen dem Rand des Elements und dem rechten Rand des enthaltenden Blocks an.
  • Wenn die Position auf "relative" eingestellt ist, gibt die Eigenschaft right an, wie weit der rechte Rand des Elements von seiner normalen Position nach rechts verschoben wird.
  • Wenn die Position auf "sticky" eingestellt ist, ändert die Eigenschaft right ihre Position auf relativ, wenn sich das Element innerhalb des Ansichtsfensters befindet, und ändert sich auf fixiert, wenn es außerhalb liegt.
  • Wenn die Position auf "static" eingestellt ist, erscheint kein Effekt.
Anfangswert auto
Gilt für Positionierte Elemente
Geerbt Nein
Animierbar Ja, die Position des Elementd ist animierbar.
Version CSS2
DOM Syntax Object.style.right = "50px";

Syntax

right: auto | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      position: absolute;
      right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft right</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41">
  </body>
</html>

Ein anderes Beispiel, wo die Eigenschaft right durch "%" definiert ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div{
      height:150px;
      width:100%;
      background-color: #ccc;
      color: #ffffff;
      }
      img {
      position: absolute;
      right: 30%;
      top:120px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft right</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41">
    <div> Das ist ein Element div.</div>
  </body>
</html>

Werte

Wert Beschreibung
auto Definiert die Position des rechten Randes. Es ist der Standardwert dieser Eigenschaft.
length Definiert die rechte Randposition mit px, cm usw. Negative Werte sind erlaubt.
% Stellt die rechte Randposition mit % des enthaltenden Elements ein. Negative Werte sind erlaubt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 5.0+

Übe dein Wissen

Was macht die CSS-Eigenschaft 'right' in der Webentwicklung?
Finden Sie das nützlich?