CSS offset-anchor property

Previous Page Offset
Next Page offset-distance

Definition and Usage

offset-anchor The offset-path property specifies the points on the element that are fixed by offset-path the points on the path defined by the property.

If the offset-rotate property is used offset-rotate When the element is rotated by the offset-anchor property, offset-anchor The points defined by the property will also become the rotation center.

Example

Fix the right center point of the <img> element to the defined path:

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: right center;
}

Try It Yourself

CSS Syntax

offset-anchor: auto|value|initial|inherit;

Property Value

Value	Description
auto	Default Value. The anchor is located at the center of the element, equivalent to the property value 50% 50%.
left top left center left bottom right top right center right bottom center top center center center bottom	If only one keyword is specified, the other value will be "center".
xpos ypos	The first value is the horizontal position, and the second value is the vertical position. The top left is 0 0. The unit can be pixels (0px 0px) or any other CSS unit. If only one value is specified, the other value will be 50%. Both % and position can be mixed.
x% y%	The first value is the horizontal position, and the second value is the vertical position. The top left is 0% 0%. The bottom right is 100% 100%. If only one value is specified, the other value will be 50%. The default value is: 50% 50%.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

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