CSS offset-position Eigenschaft

Die CSS-Eigenschaft offset-position definiert den Startpunkt des Offset-Pfads eines Elements — die Position, an der sich das Element befindet, bevor es durch offset-distance entlang des Pfads verschoben wird.

Motion-Path-Eigenschaften ermöglichen es, ein Element entlang einer benutzerdefinierten Route (eine Linie, eine Kurve, ein Strahl) zu animieren, ohne @keyframes für top/left zu verwenden. Der Pfad selbst wird mit offset-path festgelegt; offset-position beantwortet die Frage „Wo beginnt dieser Pfad?", wenn der Pfad seinen eigenen Ursprung nicht bereits selbst definiert.

Wann wird sie benötigt?

offset-position ist nur für Pfade relevant, deren Startpunkt nicht durch die Pfaddaten selbst festgelegt wird:

Sie gilt, wenn offset-path ein ray() oder ein einfaches path() ist, das auf einen impliziten Ursprung angewiesen ist.
Sie wird ignoriert, wenn offset-path eine geometry-box (wie border-box) oder eine <basic-shape> (wie circle()) ist, da diese ihren eigenen Referenzpunkt definieren.
Sie wird auch ignoriert, wenn die position des Elements static ist, da das Element nicht aus dem normalen Fluss herausgenommen wird.

Ein typischer Wert wie offset-position: 50% 50% startet den Motion-Pfad in der Mitte des enthaltenden Blocks; auto startet ihn an der tatsächlich berechneten Box-Position des Elements.

Warnung

Dies ist noch ein experimentelles Motion-Path-Feature. Die Browser-Unterstützung ist unvollständig (Chromium unterstützt es; Firefox und Safari hinken hinterher). Prüfen Sie daher die aktuelle Unterstützung und stellen Sie einen Fallback bereit, bevor Sie es in der Produktion einsetzen.

Anfangswert	auto
Gilt für	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	Motion Path Module Level 1
DOM-Syntax	Object.style.offsetPosition = "auto";

Syntax

CSS offset-position Syntax

offset-position: auto | <position> | initial | inherit;

Dabei akzeptiert <position> ein bis vier Werte, genau wie background-position: Ein einzelner Wert legt die horizontale Position fest (die vertikale wird standardmäßig auf center gesetzt), zwei Werte legen horizontale und dann vertikale Position fest, und Schlüsselwort-/Längenpaare können kombiniert werden.

Beispiel der offset-position Eigenschaft

Das folgende Element startet seinen Motion-Pfad bei 100px 100px innerhalb seines Containers und folgt einem ray(45deg):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Werte

Wert	Beschreibung
auto	Gibt an, dass die Anfangsposition die Position der Box ist, die mit der Eigenschaft position angegeben wurde.
`<position>`	Legt die Anfangsposition fest, wobei der enthaltende Block als Positionierungsbereich und ein dimensionsloser Punkt (Box ohne Ausdehnung) als Objektbereich verwendet wird. Dieser Wert kann mit einem bis vier Werten angegeben werden. Wenn ein Wert definiert ist, wird der zweite als center angenommen. Wenn zwei Nicht-Schlüsselwort-Werte angegeben werden, steht der erste für die horizontale Position und der zweite für die vertikale Position. Wenn drei oder vier Werte angegeben werden, sind die Längen-/Prozentwerte Abstände zu den vorangehenden Schlüsselwörtern (weitere Informationen finden Sie unter der Eigenschaft background-position).
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche verschiedenen Typen von CSS offset-Eigenschaften gibt es?