CSS offset-position Property
Example
Specify that the initial position of an element should be bottom right:
#square {
width: 60px;
height: 60px;
background:
blue;
offset-position: bottom right;
offset-path:
ray(45deg);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The offset-position property specifies the
initial position of an element along a path.
The value of offset-position determines
where the element gets placed initially for moving along an offset path if an offset-path
function does not specify its own starting position.
| Default value: | normal |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.offsetPosition="auto" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| offset-position | 116 | 116 | 122 | 16 | 102 |
CSS Syntax
offset-position: auto|normal|position|initial|inherit;
Property Values
| Value | Description |
|---|---|
| normal | Sets the offset starting position to 50% 50% of the containing block. This is default. |
| auto | Sets the offset starting position to the top-left corner of the element's box |
| position | Specifies the position as an x/y coordinate to place an element relative to its box edges. The position can be defined using one to four values |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
See 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 »
Related Pages
HTML SVG tutorial: SVG Path
CSS tutorial: CSS Animations
CSS offset property: CSS Offset property
CSS offset-anchor property: CSS Offset-anchor property
CSS offset-distance property: CSS Offset-distance property
CSS offset-path property: CSS Offset-path property
