2015-01-22 12 views
6

Come dice il titolo, quali sono le differenze tra transform: translate (x, y) e position: relative.Differenza tra trasformazione: traslazione e posizione: relativa ;?

Poiché entrambi realizzano comunque la stessa cosa (elementi di posizione), in che modo differiscono nello scopo e nell'applicazione?

Ho letto un articolo sugli elementi di centraggio utilizzando "transform: translate;" Detto questo, è meglio usare "trasformare" a causa della GPU e il motivo dell'ottimizzazione, ma in realtà non vedo il problema poiché non è comunque un grosso problema se stai solo riposizionando un elemento e non animandolo.

Quindi, alla fine, come sono entrambi diversi e in che modo?

+0

Qualcosa ha una posizione: assoluta, è possibile utilizzare la trasformazione su di essa ancora, ma non è possibile utilizzare la posizione relativa su quello stesso elemento. –

+0

Mi dispiace, mi riferivo alla differenza di riposizionamento tra "transform: translate;" e "position: absolute;", mi scuso se non mi fossi chiarito. –

+0

Inoltre [** CSS-Tricks Article **] (http://css-tricks.com/tale-of-animation-performance/) che include il collegamento a [** Paul Irish Article **] (http: // www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/) –

risposta

2

Fondamentalmente translate si basa su CSS3 2D Transforms mentre la proprietà position è una CSS2 level.

Nel browser che supporti le è stato detto che l'uso di translate amplificherà l'intero peformance grafica del browser,

, ma non tutti i browser lo supportano,

quindi se si cura di dare il supporto del browser diffusa La posizione CSS2 è sicuramente migliore,

mentre transform:translate() è il futuro.

+0

Questa non è quasi certamente la differenza principale. Queste sono due cose completamente diverse pensate per scopi completamente diversi. – BoltClock

+0

queste erano solo informazioni di base, considerando solo lo spostamento di un elemento 2D, non pensi che possano servire allo stesso scopo? sicuramente Chris Coyier's e Paul Irish's sono un tipo di ricerca più approfondito (link al commento di Paulie_D sopra) – maioman

+1

@BoltClock cura di spiegare? –