CSS offset-position property

Previous Page offset-path
Next Page offset-rotate

Definition and Usage

offset-position The attribute specifies the initial position of the element on the path.

If offset-path If the function does not specify its own starting position, then offset-position The value determines the initial position of the element as it moves along the offset path.

Instance

Example 1

The initial position of the specified element should be at the bottom right corner:

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

Try It Yourself

Example 2

View different offset starting positions:

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align: center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align: center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align: center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align: center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align: center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Try It Yourself

CSS Syntax

offset-position: auto|normal|position|initial|inherit;

Property Value

Value	Description
normal	Sets the offset starting position to 50% 50% of the containing block. Default value.
auto	Sets the offset starting position to the top left corner of the element box.
position	Specify an x/y coordinate to place the element relative to its box edge. You can use 1 to 4 values to define the position.
initial	Sets this property to its default value. See: initial.
inherit	Inherits this property from its parent element. See: inherit.

Technical Details

Default Value:	normal
Inheritance:	No
Animation Creation:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.offsetPosition="auto"