Свойство CSS `offset-position`

Свойство offset-position CSS задаёт начальное положение элемента вдоль траектории. Обычно это свойство используется вместе со свойством offset-path для создания эффекта движения. Значение offset-position определяет начальное положение элемента при перемещении вдоль смещённой траектории, если функция offset-path, например path(), не задаёт собственное начальное положение.

Свойство offset-position является частью системы движения, основанной на составляющих свойствах offset, включая offset-anchor, offset-distance и offset-path. Эти свойства работают вместе, создавая различные эффекты движения вдоль траектории.

Синтаксис

/* 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;

Значения

normal

Указывает, что у элемента нет начального положения смещения, и помещает элемент в 50% 50% содержащего блока. Это значение по умолчанию.

auto

Указывает, что начальным положением смещения является верхний левый угол рамки элемента.

position

Задаёт положение в виде координат x/y для размещения элемента относительно краёв его рамки. Положение можно задать одним, двумя, тремя или четырьмя значениями. Если используются два значения, не являющиеся ключевыми словами, первое задаёт горизонтальное положение, а второе — вертикальное. Если указано только одно значение, предполагается, что второе значение — center. При использовании трёх или четырёх значений значения <length-percentage> задают смещения для предшествующих им ключевых слов. Подробнее об этих типах значений см. в описании свойства background-position.

Формальное определение

Формальный синтаксис

offset-position = 
  normal |
  auto |
  <position>

<position> = 
  [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

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

Примеры

Задание начального значения offset-position для offset-path

В этом примере свойство offset-path используется для задания траектории, по которой должен перемещаться элемент cyan. Значение CSS-функции path() представляет собой путь данных SVG, описывающий кривую траекторию. Во время анимации move элемент движется по этой кривой траектории.

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%;
  }
}

Результат

Сравнение различных начальных положений смещения

В этом примере наглядно сравниваются различные начальные положения смещения элемента при использовании ray() для задания значения свойства offset-path. Число внутри рамки элемента указывает элемент, к которому применяется CSS, а также точку привязки элемента.

<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);
}

Результат

В box0 отсутствие свойства offset-path означает, что offset-position со значением normal или auto не оказывает эффекта. Если offset-position имеет значение normal, луч начинается в центре содержащего блока (то есть в 50% 50%). Это начальное положение смещённой траектории по умолчанию, используемое, если offset-position не задано. Обратите внимание на разницу между начальными положениями смещения auto и left top. Значение auto выравнивает точку привязки элемента по его собственному верхнему левому углу, тогда как значение left top выравнивает точку привязки элемента по верхнему левому углу содержащего блока.

Спецификации

Совместимость с браузерами

См. также

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