Chuyển đổi CSS so với vị trí

Question

Một số người có thể giải thích cho tôi sự khác biệt trong việc chuyển đổi thuộc tính left hoặc right vị trí hoặc -transform: translateX(n), vì cả hai dường như đều đạt được điều tương tự nhưng có thể được áp dụng độc lập. Tôi hiểu về khả năng tăng tốc phần cứng nhưng điều đó phụ thuộc vào việc thực hiện.

// psuedo code; 

#box { 
    -transition-property: all; 
    -transition-duration: 1s; 
} 

// javascript 

box.style.transform = "translateX(200px)"; 
vs 
box.style.left = "200px"; 

Ưu điểm của cái này với cái kia là gì? Cảm ơn,

p

Answer 1

top và left thuộc tính CSS chỉ làm việc trên các yếu tố vị trí relative, absolute hay fixed. Ngoài ra, top và left thuộc tính dựa vào vị trí của cha mẹ (tương đối, tuyệt đối hoặc tĩnh). Bản dịch không bị ảnh hưởng bởi cài đặt đó.

---

biến đổi dịch là "giống hệt nhau" để áp dụng top và left khi phần tử có position: relative. Trong bất kỳ trường hợp nào khác, chúng không phải là các hoạt động tương tự.

Answer 2

Vị trí phụ thuộc vào những gì position được đặt thành, transform hoạt động từ chính phần tử đó. Vì vậy, bạn có thể xem transform là trùng với position:relative;.

Tuy nhiên, bạn vẫn có thể sử dụng transform trên một phần tử được định vị hoàn toàn (để định vị nó tương đối mà không cần phần tử bổ sung hoặc sử dụng lề), cũng như transform là CSS3 vì vậy nếu bạn có thể sử dụng position.

Answer 3

Có bài viết tốt: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left