CSS-Eigenschaft offset-position

Die Eigenschaft offset-position definiert die Ausgangsposition des Offsetpfades.

Wenn die Eigenschaft position mit dem Wert "static" angegeben ist, wird offset-position ignoriert.

Die Eigenschaft offset-position wird auch dann ignoriert, wenn offset-path durch "geometry-box" oder "basic shape" definiert ist.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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: auto;
      offset-anchor: center;
      offset-path: ray(45deg);
      }
    </style>
  <body>
    <h2>Beispiel für die Eigenschaft offset-position</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Zeigt an, dass die Ausgangsposition die Eigenschaft position der Box, die durch die Eigenschaft position angegeben wird, ist.
<position> Zeigt die Ausgangsposition an, wobei der enthaltene Block als Positionierungsbereich und ein dimensionsloser Punkt (Nullrahmen) als Objektbereich dient.
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

Übe dein Wissen

Was sind die möglichen Werte für die Eigenschaft 'offset-position' in CSS?
Finden Sie das nützlich?