CSS offset-position Property

❮ Previous Reference Next ❯

Experimental: This is an experimental technology.

Example

.example {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 50px;
  height: 50px;
  background: tomato;
}
Try this code ❯

Meaning:

The offset-position CSS property defines the initial position of the offset-path.

Default value:auto
Inherited:No
Animatable:Yes
Version:CSS3
JavaScript syntax:
object.style.offsetPosition="auto|position|initial|inherit|revert|revert-layer|unset";


Standard Syntax

offset-position: auto|position|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
auto The initial position is the position of the box specified by the position property.
position A position defines an x/y coordinate, to place an item relative to the edges of an element's box.

Possible values:

  • top
  • bottom
  • left
  • right
  • center
  • length(px, em, cm, etc...)
  • percentage(%)
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  offset-position: auto;
}
❮ Previous Reference Next ❯