2015-01-22 10 views
6

Jak mówi tytuł, jakie są różnice między transformacją: translate (x, y) a position: relative.Różnica między transformacją: translate i position: relative ;?

Skoro oboje osiągają to samo (elementy pozycji), to w jaki sposób różnią się celem i zastosowaniem?

Przeczytałem artykuł o centrowaniu elementów za pomocą "transform: translate;" powiedział, że lepiej jest użyć "transformacji" z powodu GPU i przyczyny optymalizacji, ale tak naprawdę nie widzę problemu, ponieważ i tak nie jest to wielka sprawa, jeśli po prostu zmieniasz położenie elementu i nie animujesz go.

W końcu, w jaki sposób różnią się one pod innymi względami?

+0

Czy coś ma pozycję: bezwzględna, możesz użyć przekształcenia, ale nie możesz użyć pozycji względnej na tym samym elemencie. –

+0

Przykro mi, mówiłem o zmianie położenia między "transformuj: tłumacz"; i "position: absolute;" Przepraszam, jeśli nie wyraziłem się jasno. –

+0

Również [** Artykuł CSS-Tricks **] (http://css-tricks.com/tale-of-animation-performance/), który zawiera link do [** Paul Irish Article **] (http: // www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) –

Odpowiedz

2

Zasadniczo translate opiera się na CSS3 2D Transforms, natomiast właściwość position to CSS2 level.

W przeglądarce które obsługują to zostało powiedziane, że za pomocą translate wzmocni całą graficzny peformance w przeglądarce,

ale nie wszystkie przeglądarki czy wspierają go,

więc jeśli zależy Ci, aby dać wsparcie przeglądarki powszechne Pozycja CSS2 jest z pewnością lepsza,

, podczas gdy transform:translate() jest przyszłością.

+0

To prawie na pewno nie główna różnica. Są to dwie zupełnie różne rzeczy przeznaczone do zupełnie innych celów. – BoltClock

+0

były to tylko podstawowe informacje, biorąc pod uwagę tylko przesunięcie elementu 2d, nie sądzisz, że mogą służyć temu samemu celowi? na pewno Chris Coyier i Paul Irish są głębszym typem badań (link do komentarza Pauliego powyżej) – maioman

+1

@BoltClock care to explain? –

Powiązane problemy