Atoz CSS: Perbezaan Antara Terjemahan & Kedudukan Relatif

Takeaways Key

Perbezaan utama antara kedudukan CSS: Relatif dan Transform: Terjemahan () terletak pada bagaimana ia mempengaruhi susun atur unsur -unsur lain. Kedudukan: Relatif Mengubah kedudukan elemen dalam aliran dokumen, yang berpotensi mempengaruhi unsur -unsur lain, sementara transformasi: Terjemahan () menggerakkan elemen tanpa mempengaruhi susun atur unsur -unsur lain.
CSS Transform: Translate () sering disukai untuk animasi kerana penggunaan GPU (Unit Pemprosesan Grafik) pecutan, yang menghasilkan animasi yang lebih lancar dan prestasi yang lebih baik. Ia juga perlu diperhatikan bahawa nilai berasaskan peratusan berkelakuan berbeza antara kedua-dua kaedah, dengan terjemahan mengambil peratusan lebar atau ketinggian yang dikira oleh elemen.
Kedua -dua kedudukan CSS: Relatif dan Transform: Terjemahan () boleh digunakan pada elemen yang sama. Gabungan ini membolehkan penempatan tepat elemen pada halaman dan pengubahsuaian selanjutnya kedudukan tersebut. Ini menjadikan mereka satu set alat yang kuat untuk penempatan elemen.

Artikel ini adalah sebahagian daripada siri Atoz CSS kami. Anda boleh mencari penyertaan lain untuk siri ini di sini. Anda boleh melihat transkrip penuh dan screencast untuk video yang sepadan mengenai TranslateX di sini.

Selamat datang ke siri Atoz CSS kami! Dalam siri ini, saya akan meneroka nilai CSS yang berbeza (dan sifat) setiap bermula dengan huruf yang berbeza dari abjad. Kami tahu bahawa kadang -kadang screencasts tidak cukup, jadi dalam artikel ini, kami telah menambah petua cepat mengenai perbezaan antara terjemahan dan kedudukan.

x adalah untuk menterjemah dan kedudukan

Terdapat beberapa sifat CSS untuk meletakkan elemen pada halaman. Ini termasuk sifat susun atur besar seperti apungan, margin dan padding dan alat yang lebih halus seperti kedudukan dan diterjemahkan ().

di permukaan, kedudukan: relatif dan transformasi: diterjemahkan () nampaknya berfungsi dengan cara yang sama tetapi terdapat beberapa perbezaan halus yang penting untuk memahami sehingga kami memilih alat yang tepat untuk pekerjaan.

Apakah perbezaan antara terjemahan dan kedudukan: relatif?

Dalam jawatan ini, kita akan melihat beberapa perbezaan antara kaedah ini untuk penempatan elemen tetapi pertama, izinkan saya menjelaskan apa yang dilakukan oleh pelbagai sifat ini.

Jika kita menetapkan kedudukan: relatif pada elemen kita boleh menggunakannya untuk membuat sempadan untuk

benar -benar

unsur -unsur kedudukan dalam. Ini mungkin penggunaan kedudukan relatif yang lebih biasa tetapi ia tidak penggunaan yang kita sedang berbincang di sini.

Jika kita menggabungkan kedudukan: relatif dengan salah satu sifat offset atas, bawah, kiri atau kanan elemen akan dipindahkan dari tempat asalnya di susun atur sementara memelihara ruang dalam dokumen yang pernah diduduki. Unsur ini akan dipindahkan ke lapisan baru dan "perintah lapisan" atau perintah penyusunannya kemudiannya boleh dikawal dengan harta z-indeks.

<span><span>.thing</span> {
</span>  <span>position: relative;
</span>  <span>top: 100px;
</span>  <span>left: 50px;
</span><span>}</span>

Dalam contoh di atas, elemen akan dipindahkan 100px dari atas dan 50px jauhnya dari kiri kedudukan asalnya.

Apabila menggunakan Transform: Terjemahan (x, y) kita mendapat hasil visual yang sangat serupa untuk menggunakan kedudukan relatif. Hasil yang sama seperti di atas dapat dicapai dengan coretan berikut:

<span><span>.thing</span> {
</span>  <span>transform: translate(50px, 100px);
</span><span>}</span>

Dalam kes ini, kita menterjemahkan koordinat elemen oleh 50px di sepanjang paksi x dan 100px di sepanjang paksi-y. Hasil akhirnya secara visual sama dengan contoh kedudukan sebelumnya.

Jadi, mengapa kita mempunyai dua cara untuk melakukan perkara yang sama? Nah, ada beberapa perbezaan antara pendekatan ini ...

Sokongan penyemak imbas

Kedudukan

adalah harta CSS2 sedangkan transformasi adalah harta CSS3. Terdapat perbezaan dalam sokongan penyemak imbas sebagai hasilnya walaupun benar -benar satu -satunya pelayar yang tidak menyokong transformasi 2D adalah IE8 dan di bawah.

Jika anda perlu menyokong versi lama IE, Transform tidak akan menjadi pilihan untuk anda.

pecutan GPU

Harta transformasi akan menggunakan pecutan perkakasan jika mungkin dengan menggunakan translate () over kedudukan akan melihat manfaat prestasi jika sebarang animasi atau peralihan juga digunakan pada elemen.

Jika anda ingin memindahkan elemen sebagai sebahagian daripada peralihan atau animasi kerangka utama, nikmat menggunakan terjemahan dan bukannya kedudukan (ini berlaku untuk kedudukan mutlak dan relatif). Untuk lebih mendalam mengenai ini, termasuk penjelasan dan profil prestasi, lihat video ini dari Paul Irish.

nilai berasaskan peratusan berkelakuan berbeza

Satu perbezaan utama antara kedua -dua kaedah meletakkan elemen adalah bagaimana mereka bertindak balas terhadap nilai berasaskan peratusan.

Ambil markup dan gaya berikut:

<span><span><span><div</span> class<span>="box position"</span>></span><span><span></div</span>></span> 
</span><span><span><span><div</span> class<span>="box transform"</span>></span><span><span></div</span>></span></span>

<span><span>.box</span> {
</span>  <span>width: 200px;
</span>  <span>height: 200px;
</span><span>}
</span><span><span>.position</span> {
</span>  <span>position: relative;
</span>  <span>left: 50%;
</span>  <span>background: red;
</span><span>}
</span><span><span>.transform</span> {
</span>  <span>transform: translateX(50%);
</span>  <span>background: blue;
</span><span>}</span>

Kedua -dua elemen telah diberi offset dari pinggir kiri mereka sebanyak 50%.

tepi kiri kotak merah akan menjadi 50% dari tepi bekas induknya.

tepi kiri kotak biru akan menjadi 100px dari pinggir kiri bekas induknya. Jarak ini adalah kerana 50% daripada 200px adalah 100px.

Apabila menetapkan nilai peratusan dengan terjemahan, peratusan diukur sebagai peratusan unsur -unsur yang dikira lebar atau ketinggian.

lihat pena vyyxgj oleh sitepoint (@sitePoint) pada codepen.

menggabungkan kedudukan dan diterjemahkan bersama

Satu titik akhir untuk dibuat ialah kerana kedudukan dan transformasi adalah dua sifat yang berbeza, kita boleh menggabungkannya bersama -sama. Ini membolehkan kita menggabungkan kedudukan mutlak untuk meletakkan elemen di tempat yang sangat spesifik di halaman dan kemudian mengubah kedudukannya dengan transformasi.

Contoh ini boleh mempunyai unsur yang diposisikan menghidupkan dan ke bawah atau kiri dan kanan. Atau kita boleh menggabungkan kedudukan dengan diterjemahkan untuk mencapai pusat menegak yang fleksibel.

Jadi sementara kedua -dua kaedah meletakkan elemen boleh digunakan untuk mencapai hasil yang sama, terdapat beberapa perbezaan yang signifikan dan menggabungkan kekuatan setiap pendekatan menjadikan mereka satu set alat yang sangat kuat.

Soalan Lazim (Soalan Lazim) Mengenai CSS Terjemahan Vs Position

Apakah perbezaan utama antara CSS Terjemahan dan kedudukan? Kedudukan CSS mengubah kedudukan elemen dalam aliran dokumen, yang bermaksud ia dapat mempengaruhi susun atur unsur -unsur lain. Sebaliknya, terjemahan CSS adalah fungsi transformasi yang menggerakkan elemen tanpa menjejaskan susun atur unsur -unsur lain. Ia mengubah kedudukan rendering visual, bukan kedudukan sebenar dalam aliran dokumen.

Bilakah saya harus menggunakan css diterjemahkan dan bukannya kedudukan? mempengaruhi susun atur unsur -unsur lain. Ia juga bermanfaat untuk animasi kerana ia menggalakkan prestasi yang lebih baik dan animasi yang lebih lancar. Ini kerana Translate menggunakan GPU (unit pemprosesan grafik), yang lebih efisien pada grafik dan animasi. Anda boleh menggunakan kedua -dua CSS terjemahan dan kedudukan pada elemen yang sama. Walau bagaimanapun, penting untuk memahami bagaimana mereka bekerjasama. Harta kedudukan akan menjejaskan kedudukan elemen dalam aliran dokumen terlebih dahulu, dan kemudian fungsi terjemahan akan memindahkan elemen dari kedudukan itu. CSS Translate sering disyorkan untuk animasi kerana ia menggunakan GPU, yang lebih efisien dalam memberikan grafik dan animasi. Ini menghasilkan animasi yang lebih lancar dan penggunaan CPU (Unit Pemprosesan Pusat) yang kurang, yang dapat meningkatkan prestasi keseluruhan halaman web. CSS Terjemahan kerja dengan semua jenis nilai kedudukan - statik, relatif, mutlak, tetap, dan melekit. Fungsi Terjemahan akan memindahkan elemen dari kedudukannya, tanpa mengira nilai kedudukan.

unit apa yang boleh saya gunakan dengan CSS Translate?

Dengan CSS diterjemahkan, anda boleh menggunakan nilai piksel, peratusan, dan unit Viewport. Peratusan adalah relatif kepada saiz elemen itu sendiri, bukan ibu bapanya. Ini memberi anda lebih banyak fleksibiliti dan kawalan ke atas pergerakan elemen. Kedudukan CSS, itu tidak disyorkan. Ini kerana menukar kedudukan kedudukan boleh mencetuskan perubahan susun atur, yang boleh memberi kesan negatif terhadap prestasi. Untuk animasi, CSS diterjemahkan adalah pilihan yang lebih baik.

Bagaimana CSS diterjemahkan mempengaruhi indeks z elemen? Walau bagaimanapun, menggunakan fungsi terjemahan ke elemen mencipta konteks penyusunan baru, yang boleh mempengaruhi bagaimana indeks z digunakan. , anda boleh menggunakan CSS Terjemahan untuk memindahkan elemen secara menyerong. Anda boleh melakukan ini dengan menentukan kedua -dua nilai x dan y dalam fungsi terjemahan. Sebagai contoh, Terjemahan (50px, 50px) akan menggerakkan elemen 50 piksel ke kanan dan 50 piksel ke bawah, dengan berkesan mewujudkan pergerakan pepenjuru. 🎜> Tidak, terjemahan CSS tidak menjejaskan kawasan yang boleh diklik dengan elemen. Kawasan yang boleh diklik tetap berada di kedudukan asal dalam aliran dokumen, walaupun rendering visual elemen telah dipindahkan dengan terjemahan.

Atas ialah kandungan terperinci Atoz CSS: Perbezaan Antara Terjemahan & Kedudukan Relatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!