offset-position CSS property

Syntax

/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;

Werte

normal

Gibt an, dass das Element keine Offset-Startposition hat und das Element bei 50% 50% des umschließenden Blocks platziert. Dies ist der Standardwert.

auto

Gibt an, dass die Offset-Startposition die obere linke Ecke des Elementkastens ist.

<position>

Gibt die Position als x/y-Koordinate an, um ein Element relativ zu seinen Kanten zu platzieren. Die Position kann mit einem bis vier Werten definiert werden. Wenn zwei Nicht-Schlüsselwortwerte verwendet werden, repräsentiert der erste Wert die horizontale Position und der zweite die vertikale Position. Wenn nur ein Wert angegeben wird, wird der zweite Wert als center angenommen. Wenn drei oder vier Werte verwendet werden, sind die <length-percentage>-Werte Versätze für die vorhergehenden Schlüsselwortwerte. Für eine ausführlichere Erklärung dieser Wertetypen siehe background-position.

Formale Definition

Formale Syntax

offset-position = 
  normal      |
  auto        |
  <position>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Anfangs-Offset-Position für einen Offset-Pfad festlegen

In diesem Beispiel wird die offset-path-Eigenschaft verwendet, um den Pfad zu definieren, entlang dem sich das cyan-Element bewegen soll. Der Wert der path()-CSS-Funktion ist ein SVG-Datenpfad, der einen gekrümmten Pfad beschreibt. Das Element bewegt sich während der move-Animation entlang dieses gekrümmten Pfades.

HTML

<div id="wrap">
  <div id="motion-demo"></div>
</div>

CSS

#wrap {
  width: 260px;
  height: 160px;
  border: 1px dashed black;
}

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

Ergebnis

Vergleich verschiedener Offset-Startpositionen

Dieses Beispiel vergleicht visuell verschiedene anfängliche Offset-Startpositionen eines Elements, wenn ray() verwendet wird, um einen Wert für die offset-path-Eigenschaft anzugeben. Die Nummer innerhalb des Elementkastens zeigt das Element an, auf das CSS angewendet wird, sowie den Ankerpunkt des Elements.

<div class="wrap">
  <div class="box">0</div>
  <div class="box box0">0</div>
  <pre>
    offset-position: normal;
    /* No offset-path specified */
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box1">1</div>
  <pre>
    offset-position: normal;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box2">2</div>
  <pre>
    offset-position: auto;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box3">3</div>
  <pre>
    offset-position: left top;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box4">4</div>
  <pre>
    offset-position: 30% 70%;
    offset-path: ray(120deg);
  </pre>
</div>

.wrap {
  position: relative;
  width: 80vw;
  height: 120px;
  border: 1px solid black;
  margin: 0 2em 4em 5em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}

.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Ergebnis

In box0 bedeutet das Fehlen der offset-path-Eigenschaft, dass ein offset-position von entweder normal oder auto keine Wirkung hat. Wenn offset-position normal ist, beginnt der Strahl im Zentrum des umschließenden Blocks (d.h. 50% 50%). Dies ist die Standardstartposition eines Offset-Pfades und wird verwendet, wenn keine offset-position angegeben ist. Beachten Sie den Unterschied zwischen den Offset-Startpositionen auto und left top. Der Wert auto richtet den Ankerpunkt des Elements an seiner eigenen oberen linken Ecke aus, während der Wert left top den Ankerpunkt des Elements an der oberen linken Ecke des umschließenden Blocks ausrichtet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• offset
• offset-anchor
• offset-distance
• offset-path
• offset-rotate