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 versetzte Startposition hat und platziert das Element bei 50% 50% des umgebenden Blocks. Dies ist der Standardwert.

auto

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

<position>

Gibt die Position als eine x/y-Koordinate an, um ein Element relativ zu seinen Box-Kanten zu platzieren. Die Position kann mit einem bis vier Werten definiert werden. Wenn zwei Werte nicht als Schlüsselwort verwendet werden, repräsentiert der erste Wert die horizontale Position und der zweite die vertikale Position. Wenn nur ein Wert angegeben ist, 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. Weitere Erklärungen zu diesen Werttypen finden Sie bei 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

Initiale Festlegung der offset-position für einen offset-path

In diesem Beispiel wird die offset-path Eigenschaft verwendet, um den Pfad zu definieren, entlang dessen 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 versetzter Startpositionen

In diesem Beispiel werden visuell verschiedene initiale versetzte Startpositionen eines Elements verglichen, wenn ray() verwendet wird, um einen Wert für die offset-path Eigenschaft anzugeben. Die Zahl in der Elementbox 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 hat das Fehlen der offset-path Eigenschaft zur Folge, dass ein offset-position von entweder normal oder auto keine Wirkung hat. Wenn offset-position normal ist, beginnt der Strahl im Zentrum des umgebenden Blocks (d.h. 50% 50%). Dies ist die Standard-Startposition eines Offset-Pfades und wird verwendet, wenn keine offset-position angegeben ist. Beachten Sie den Unterschied zwischen den versetzten 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 umgebenden Blocks ausrichtet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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