CSS offset-position-Eigenschaft

Die offset-position-Eigenschaft gibt die Anfangsposition des Offset-Pfads an.

Wenn die position-Eigenschaft mit dem Wert „static“ angegeben wird, wird offset-position ignoriert.

offset-position wird ebenfalls ignoriert, wenn der offset-path eine „geometry-box“ oder eine „basic shape“ ist.

WARNING

Diese Eigenschaft ist eine experimentelle Technologie.

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-Syntax für offset-position

css

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

Beispiel für die offset-position-Eigenschaft:

CSS-Codebeispiel für offset-position

html

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

Try it Yourself »

Ergebnis

CSS offset-position values list

Werte

Wert	Beschreibung
auto	Gibt an, dass die Anfangsposition die Position der Box ist, die mit der position-Eigenschaft angegeben wird.
`<position>`	Gibt die Anfangsposition an, wobei der umschließende Block als Positionierungsbereich und ein dimensionsloser Punkt (Box mit der Größe null) als Objektbereich dient. Dieser Wert kann mit ein bis vier Werten angegeben werden. Wenn ein Wert definiert ist, wird der zweite als „center“ angenommen. Wenn zwei Nicht-Schlüsselwortwerte angegeben werden, stellt der erste die horizontale Position und der zweite die vertikale Position dar. Wenn drei oder vier Werte angegeben werden, sind die Längen-Prozent-Werte Versätze für die vorangehenden Schlüsselwortwerte (lesen Sie die Eigenschaft background-position für weitere Informationen).
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

CSS offset-position-Eigenschaft ​

Syntax ​

Beispiel für die offset-position-Eigenschaft: ​

Ergebnis ​

Werte ​

Praxis ​

CSS offset-position-Eigenschaft

Syntax

Beispiel für die offset-position-Eigenschaft:

Ergebnis

Werte

Praxis