offset-position
CSS offset-position Property
The offset-position property specifies the initial position of the offset path.
If the position property is specified with “static” value, the offset-position will be ignored.
The offset-position is also ignored if the offset-path is a “geometry-box”, or a “basic shape”.
This property is an experimental technology.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | Motion Path Module Level 1 |
| DOM Syntax | Object.style.offsetPosition = “auto”; |
Syntax
Syntax
offset-position: auto | <position> | initial | inherit;
Example of the offset-position property:
<!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: auto;
offset-anchor: center;
offset-path: ray(45deg);
}
</style>
<body>
<h2>Offset-position property example</h2>
<div id="element1">
<div id="element2"></div>
</div>
</body>
</html>
Result
Values
Values
| Value | Description |
|---|---|
| auto | Indicates that the initial position is the position of the box which is specified with position property. |
| <position> | Specifies the initial position, with the the containing block as the positioning area and a dimensionless point (zero-sized box) as the object area.This value can be specified using one to four values. If one value is defined, the second is assumed to be center. If two non-keyword values are specified, the first one represents the horizontal position and the second one represents the vertical position. If three or four values are specified, the length-percentage values are offsets for the preceding keyword values (Read the background-position property for more information). |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |