CSS offset-position ιδιότητα

Ορισμός και χρήση

offset-position Η ιδιότητα καθορίζει την αρχική θέση του στοιχείου στον δρόμο.

Αν Προηγούμενη σελίδα Αν η συνάρτηση offset-position δεν καθορίζει την αρχική της θέση, offset-position Η τιμή καθορίζει την αρχική θέση του στοιχείου κατά τη διάρκεια της κίνησης κατά μήκος του διαδρόμου.

Παράδειγμα

Παράδειγμα 1

Η αρχική θέση του καθορισμένου στοιχείου πρέπει να είναι στο κάτω δεξί κόμβο:

#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;

Attribute 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"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
116 116 122 16 102

相关页面

SVG διαδρομήΣχετικές σελίδες

SVG διαδρομήΕκμάθηση:

CSS animationCSS offset ιδιότητα

CSS animationCSS offset-anchor ιδιότητα

CSS animationCSS offset-distance ιδιότητα

CSS animationCSS offset-path ιδιότητα

CSS animationCSS offset-rotate ιδιότητα