offset-position

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 Anfangsversatzposition hat und das Element bei 50% 50% des umschließenden Blocks platziert. Dies ist der Standardwert.

auto

Gibt an, dass die Anfangsversatzposition die obere linke Ecke des Box des Elements ist.

<position>

Gibt die Position als x/y-Koordinate an, um ein Element relativ zu seinen Boxkanten zu platzieren. Die Position kann mit einem bis vier Werten definiert werden. Wenn zwei Nicht-Keyword-Werte verwendet werden, stellt der erste Wert die horizontale Position dar 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 vorherigen Schlüsselwortwerte. Weitere Erklärungen zu diesen Werttypen finden Sie unter 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

Einstellung der anfänglichen offset-position für einen offset-path

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 Pfads.

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 initialer Offset-Startpositionen

Dieses Beispiel vergleicht visuell verschiedene Anfangs-Offset-Startpositionen eines Elements, wenn ray() verwendet wird, um einen Wert für die offset-path Eigenschaft anzugeben. Die Zahl innerhalb des Elementrahmens zeigt das Element, 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 Standard-Startposition eines Offset-Pfads 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 auf die obere linke Ecke des umschließenden Blocks ausrichtet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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