Thuộc tính offset-position CSS

Định nghĩa và cách sử dụng

offset-position Thuộc tính chỉ định vị trí ban đầu của yếu tố trên đường dẫn.

Nếu offset-path Nếu hàm không chỉ định vị trí bắt đầu của chính nó, thì offset-position giá trị quyết định vị trí ban đầu của yếu tố khi di chuyển theo đường dẫn di chuyển.

Mô hình

Ví dụ 1

Vị trí ban đầu của yếu tố được chỉ định nên là góc phải dưới:

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

Thử ngay

Ví dụ 2

Xem các vị trí bắt đầu của hiệu ứng di chuyển khác nhau:

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

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị Mô tả
normal Đặt vị trí bắt đầu của hiệu ứng di chuyển về 50% 50% của khung chứa. Giá trị mặc định.
auto Đặt vị trí bắt đầu của hiệu ứng di chuyển về góc trên cùng bên trái của khung phần tử.
position

Định nghĩa một tọa độ x/y, đặt phần tử so với cạnh khung của nó.

Có thể sử dụng từ 1 đến 4 giá trị để định nghĩa vị trí.

initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: normal
Kế thừa: Không
Hoạt hình: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến hoạt hình.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.offsetPosition="auto"

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
116 116 122 16 102

Trang liên quan

Hướng dẫn:SVG Path

Hướng dẫn:CSS Animation

Tham khảo:Thuộc tính offset CSS

Tham khảo:Thuộc tính offset-anchor CSS

Tham khảo:Thuộc tính offset-distance CSS

Tham khảo:Thuộc tính offset-path CSS

Tham khảo:Thuộc tính offset-rotate CSS