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

Свойство offset-position задаёт начальную позицию пути смещения.

Если для свойства position указано значение "static", свойство offset-position будет проигнорировано.

offset-position также игнорируется, если offset-path имеет значение "geometry-box" или "basic shape".

WARNING

Эта технология является экспериментальной.

Начальное значение	auto
Применяется к	Элементы, поддающиеся трансформации.
Наследуется	Нет.
Анимация	Да.
Версия	Motion Path Module Level 1
DOM-синтаксис	Object.style.offsetPosition = "auto";

Синтаксис

Синтаксис CSS offset-position

css

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

Пример использования свойства offset-position:

Пример кода CSS 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 »

Результат

CSS offset-position values list

Значения

Значение	Описание
auto	Указывает, что начальная позиция — это позиция блока, заданная свойством position.
`<position>`	Задаёт начальную позицию, используя содержащий блок как область позиционирования и безразмерную точку (блок нулевого размера) как область объекта. Это значение можно указать с помощью одного или четырёх значений. Если определено одно значение, второе принимается за center. Если указаны два значения без ключевых слов, первое задаёт горизонтальную позицию, а второе — вертикальную. Если указаны три или четыре значения, значения длины/процента являются смещениями относительно предыдущих ключевых слов (подробнее см. свойство background-position).
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

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

Синтаксис ​

Пример использования свойства offset-position: ​

Результат ​

Значения ​

Практика ​

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

Синтаксис

Пример использования свойства offset-position:

Результат

Значения

Практика