Memahami & Menggunakan Posisi Relatif di Divi

Properti posisi relatif mungkin adalah tipe posisi yang paling misterius. Namun, begitu kami memahami cara kerjanya, kami dapat menggunakannya untuk keuntungan kami saat mendesain situs di Divi. Apa yang kami temukan mungkin mengejutkan Anda.

Dalam posting ini kita akan membahas:

• Gambaran Umum Empat Jenis Pemosisian Divi
• Bagaimana Posisi Relatif “Memposisikan” Elemen di Divi
• 5 Alasan Menggunakan Posisi Relatif di Divi
• Posisi Relatif vs. Margin
• Posisi Relatif vs. Transform Terjemahan

Coba lihat!

Ikhtisar Empat Jenis Pemosisian Divi

Posisi relatif adalah salah satu dari empat jenis posisi yang tersedia di Divi. Berikut adalah ikhtisar singkat masing-masing di bawah ini.

Statis (Default)

Elemen statis secara teknis tidak "diposisikan" karena mereka tetap dengan aliran normal atau urutan elemen pada halaman, dan mereka tidak merespons properti atas, kanan, bawah, dan kiri seperti elemen yang diposisikan lainnya (itulah sebabnya tidak offset tersedia di Divi untuk elemen dalam posisi statis/default). Di Divi, ketika kami memilih posisi default untuk sebuah modul, kami memilih posisi statis. Perlu juga disebutkan bahwa beberapa elemen di Divi (seperti baris dan bagian) akan memiliki posisi relatif secara default (bukan posisi statis).

Relatif

Elemen yang diposisikan secara relatif adalah semacam elemen statis yang mengikuti aliran normal halaman. Perbedaan utama adalah bahwa elemen yang diposisikan secara relatif dapat diposisikan menggunakan properti atas, bawah, kiri, dan kanan. Selain itu, tidak seperti elemen statis, mereka juga dapat diposisikan menggunakan properti Z Index.

Mutlak

Elemen yang diposisikan benar-benar keluar dari aliran dokumen normal dan oleh karena itu tidak ada ruang aktual yang dibuat pada halaman untuk elemen tersebut. Kita dapat menganggapnya sebagai elemen yang mengambang di atas elemen lain di halaman yang menempati ruang sebenarnya. Ini akan diposisikan relatif terhadap wadah induk yang diposisikan terdekat.

Tetap

Seperti posisi absolut, elemen dengan posisi tetap akan keluar dari aliran normal halaman dan tidak memiliki ruang aktual yang dibuat di dalam halaman. Perbedaan utama antara absolut dan tetap adalah bahwa posisi tetap relatif terhadap jendela browser atau viewport. Dengan kata lain, di mana pun elemen berada dalam aliran normal halaman, setelah diberi posisi tetap, posisinya sekarang akan langsung berhubungan dengan jendela browser. Kita dapat menggunakan properti atas, bawah, kiri, dan kanan untuk memposisikan elemen di dalam viewport. Karena elemen tetap akan sering berada di belakang atau di depan elemen lain pada halaman, Z Index akan membantu mengurutkan elemen tetap di atas yang lain.

CATATAN: Ada jenis pemosisian lain di CSS yang disebut lengket. Elemen yang diposisikan secara melekat berperilaku seperti elemen yang diposisikan secara relatif sampai kita menggulir ke wadahnya (pada titik tertentu ditentukan oleh nilai teratas). Kemudian elemen menjadi tetap (atau macet) hingga pengguna menggulir ke ujung wadah. Namun, posisi lengket bisa sedikit tidak terduga karena faktor lain dapat menghambat fungsionalitas. Di Divi, opsi lengket tidak tersedia dalam opsi bawaan karena alasan ini. Namun, ada cara untuk menggunakan "posisi: lengket" di Divi.

Bagaimana Posisi Relatif "memposisikan" elemen di Divi

Seperti disebutkan dalam ikhtisar, jenis posisi Relatif mirip dengan "posisi" statis karena elemen tetap dalam aliran normal dokumen (HTML pada halaman). Perbedaan sebenarnya adalah begitu kita menetapkan elemen dengan posisi relatif, sekarang memiliki opsi baru yang tersedia untuk memposisikan elemen. Opsi ini mencakup properti atas, bawah, kiri, dan kanan serta properti Indeks Z.

Di Divi, opsi posisi tambahan ini dapat ditemukan di bawah grup opsi posisi setelah posisi relatif dipilih.

Menggunakan Offset dengan Posisi Relatif

Nilai Offset Origin dan Offset akan bekerja sama untuk memposisikan elemen kita di mana pun kita inginkan dalam wadah induk. Dalam contoh ini, kami memiliki modul yang memiliki posisi relatif, offset kiri atas, offset vertikal 25px, dan offset horizontal 25px. Perhatikan bagaimana nilai offset akan memindahkan elemen dari asal offset secara horizontal dan/atau vertikal.

Ini adalah modul yang sama dengan offset yang sama tetapi dengan asal offset kanan atas.

Ini adalah modul yang sama dengan offset yang sama dan asal offset kanan bawah.

Dan di sini adalah modul yang sama dengan offset yang sama dan asal offset kiri bawah.

Tidak Ada Kejutan Spasi

Dengan posisi relatif, ruang sebenarnya dari elemen tetap di tempat asalnya setelah elemen dipindahkan menggunakan offset (atas, bawah, kiri, kanan). Posisi baru elemen tidak bergerak atau memengaruhi spasi elemen lainnya di halaman. Itu pada dasarnya melayang di atas elemen lain seperti roh yang meninggalkan tubuhnya.

Alasan Menggunakan Posisi Relatif

#1 Untuk Membuat Wadah Induk untuk Elemen yang Diposisikan Sepenuhnya

Ini mungkin aplikasi paling populer dari tipe posisi relatif. Karena setiap elemen yang diposisikan secara absolut adalah relatif terhadap ancestor yang diposisikan terdekat, kita dapat memilih untuk menjadikan salah satu ancestornya sebagai elemen yang diposisikan hanya dengan memberinya posisi relatif (posisi statis default tidak secara teknis "diposisikan"). Ini membuat aliran dokumen tetap di tempatnya (seperti statis) dan memungkinkan kita memilih wadah untuk elemen absolut.

#2 Untuk Memindahkan Elemen tanpa Mempengaruhi Elemen Lain di Halaman.

Dengan posisi relatif, kita dapat menggunakan offset untuk menyenggol item agar sejajar tanpa memengaruhi elemen lainnya. Dan Dengan Divi, kita dapat memanfaatkan UI yang dapat diseret untuk memposisikan elemen secara visual secara real-time.

#3 Menggunakan Indeks Z untuk Tumpang Tindih Elemen Lain

Secara default, elemen statis tidak dapat diatur ulang di sumbu z kecuali jika diberikan posisi relatif. Begitu berada di posisi relatif, elemen akan tetap diposisikan dalam aliran normal dokumen. Hanya sekarang, kami memiliki kemampuan untuk memanfaatkan Pengindeksan Z untuk menempatkan elemen dalam urutan tertentu saat saling tumpang tindih.

#4 Untuk Menghindari Menggunakan Margin Negatif untuk Tujuan Posisi

Penempatan relatif akan meninggalkan ruang dari posisi semula. Namun, dengan margin negatif, baik konten maupun ruang aslinya dipindahkan. Misalnya, jika kita menambahkan margin atas negatif ke baris di Divi sehingga baris tumpang tindih dengan baris di atasnya, semua baris/konten akan naik bersamanya. Ini meninggalkan sedikit kekacauan untuk dibersihkan yang dapat dihindari dengan menggunakan offset posisi relatif sebagai gantinya.

Berikut adalah ilustrasi dari apa yang terjadi ketika kita menggunakan margin atas negatif untuk memindahkan modul ke atas. Perhatikan bagaimana elemen-elemen lain di bawah ini dimunculkan.

Jika kita memberikan modul yang sama posisi relatif, kita dapat menggunakan offset vertikal untuk membawa modul ke atas tanpa mempengaruhi sisa spasi pada halaman.

Meskipun saya sering menggunakan margin negatif untuk memposisikan elemen di Divi, mungkin bukan ide yang baik jika kita dapat menggunakan pemosisian relatif sebagai gantinya. Margin berkaitan dengan modul kotak elemen sehingga benar-benar dimaksudkan untuk menambahkan spasi di dalam dan di sekitar elemen itu sendiri, tidak begitu banyak untuk memposisikan offset elemen dari wadah induknya seperti dengan pemosisian relatif.

Posisi Relatif vs Transform Terjemahan

Posisi relatif sangat mirip dengan menggunakan transform translate ke elemen posisi pada halaman. Keduanya memindahkan elemen sambil meninggalkan ruang sebenarnya di tempat aslinya dan tanpa memengaruhi elemen lain di halaman.

Terjemahan Lebih Baik untuk Animasi dan Transisi (seperti efek hover)

Namun, tampaknya terjemahan adalah yang terbaik untuk animasi dan transisi (seperti efek melayang) karena menyediakan transisi yang lebih cepat dan mulus. Menggunakan offset atas, bawah, kiri, dan kanan untuk menganimasikan atau mentransisikan elemen relatif bisa lebih berombak dan bisa membuat browser kita bekerja lebih keras dari yang dibutuhkan.

Unit Panjang Relatif Merespon Secara Berbeda

Jika kita menggunakan satuan panjang relatif (seperti % atau vw) untuk desain responsif, ini akan bekerja secara berbeda dengan posisi relatif dan terjemahan transformasi.

Modul Divi dengan posisi relatif dan offset horizontal 50% akan memindahkan modul secara horizontal sebesar 50% dari lebar wadah induk (atau kolom).

Modul Divi dengan transform translate (sumbu X) sebesar 50% akan memindahkan modul secara horizontal sebesar 50% dari lebar modul itu sendiri.

Menggabungkan Posisi Relatif dan Transformasi Terjemahkan ke Elemen Tengah

Seperti yang baru saja kita bahas, posisi relatif relatif terhadap induk dan properti transform translate relatif terhadap elemen itu sendiri. Karena itu, kita dapat menggunakan keduanya dalam kombinasi untuk memposisikan elemen seperti yang kita inginkan. Kita bahkan dapat menggunakan teknik ini untuk memusatkan elemen dalam wadahnya.

Misalnya, kita dapat menggunakan posisi relatif horizontal offset untuk memposisikan modul di sebelah kanan tepat 50% dari lebar kolom.

Kemudian gunakan properti translate untuk memindahkan modul 50% (dari lebar modul) ke kiri. Ini akan memastikan modul tetap berada di tengah kolom tidak peduli lebar modul.

Pikiran Akhir

Jika Anda seperti saya sebelum menulis artikel ini, Anda mungkin tidak memahami atau menggunakan tipe posisi relatif dengan baik. Mungkin aspek yang paling mengejutkan dari posisi relatif ini adalah bagaimana hal itu memengaruhi (atau tidak memengaruhi) sisa desain pada halaman. Tidak hanya bekerja bersama-sama dengan elemen absolut, tetapi juga bekerja dengan baik dengan transformasi menerjemahkan ke elemen posisi di tempat yang sempurna.

Apa pengalaman Anda dengan jenis posisi relatif?

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!