Panduan untuk Memahami & Menggunakan Posisi Absolut Divi

Properti posisi absolut adalah salah satu dari empat jenis posisi utama yang tersedia dalam opsi posisi baru Divi. Dalam tutorial ini, kita akan mengeksplorasi apa artinya memberi elemen posisi absolut di Divi dan bagaimana Anda dapat menggunakannya untuk keuntungan Anda saat mendesain situs Divi.

Dalam posting ini kita akan membahas:

• Gambaran Umum Empat Jenis Pemosisian Divi
• Bagaimana Posisi Absolut “Memposisikan” Elemen di Divi
• Keuntungan dan Kerugian menggunakan Posisi Absolut di Divi
• Menggunakan Titik Lokasi dengan Posisi Absolut
• Contoh Kasus Penggunaan: Tombol Pemosisian Benar-benar untuk Blurb Ketinggian yang Sama

Coba lihat!

Ikhtisar Empat Jenis Pemosisian Divi

Posisi absolut adalah salah satu dari empat opsi 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). Posisi statis adalah posisi default untuk setiap elemen CSS. Di Divi, ketika Anda memilih posisi default untuk sebuah modul, Anda 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. Anda 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. Anda 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 lekat berperilaku seperti elemen yang diposisikan secara relatif hingga Anda 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 position:sticky di Divi.

Bagaimana Posisi Absolut “memposisikan” sebuah elemen dalam Divi

Seperti disebutkan dalam ikhtisar, elemen yang diposisikan secara absolut akan diposisikan relatif terhadap wadah induk yang diposisikan terdekat. Wadah induk yang diposisikan adalah wadah apa pun yang diberi nilai posisi apa pun kecuali statis (mis. relatif, absolut, tetap). Itulah sebabnya dalam banyak kasus jika Anda ingin memposisikan elemen (seperti modul) secara mutlak di dalam wadah induknya (atau kolom), Anda harus memberi kolom posisi relatif sebelum memposisikan modul anak secara mutlak. Jika tidak, modul yang benar-benar diposisikan akan melihat lebih jauh ke atas dokumen/halaman untuk ancestor terdekat dengan posisi selain statis. Untuk alasan ini, di Divi, bagian dan baris keduanya memiliki posisi relatif secara default sehingga Anda dapat memposisikan elemen secara mutlak di dalam elemen tersebut dengan mudah.

Berikut adalah ilustrasi tentang apa yang akan dilakukan modul yang benar-benar diposisikan jika saya mengganti posisi default Divi untuk kolom dan mengaturnya ke statis. Perhatikan bahwa karena kolom tidak lagi memiliki posisi, modul sekarang akan menjadi relatif terhadap baris yang memiliki posisi (relatif).

Keuntungan dan Kerugian Menggunakan Posisi Absolut di Divi

Posisi absolut hanyalah salah satu dari berbagai metode untuk elemen pemosisian. Oleh karena itu akan berguna untuk menutupi beberapa keuntungan dan kerugian untuk menggunakan posisi absolut daripada yang lain.

Manfaat

Berikut adalah beberapa manfaat menggunakan posisi absolut dibandingkan properti pemosisian lainnya seperti Transform Translate atau Margins:

Alat Desain Bagus

Posisi Absolut Keluar dari aliran normal sehingga ruang sebenarnya dari elemen tidak mempengaruhi desain setelah pemosisian dilakukan. Meskipun ini juga bisa menjadi kelemahan, ini bisa bermanfaat kapan pun Anda ingin menambahkan elemen ke desain yang sudah ada tanpa pembersihan tambahan yang mungkin diperlukan untuk menambahkan ruang tambahan ke tata letak. Dengan kata lain, Anda dapat menambahkan elemen ke halaman tanpa harus memindahkan elemen yang ada untuk melakukannya.

Alternatif yang Baik untuk Float dan Margin

Dengan posisi absolut, Anda tidak perlu bergantung pada elemen mengambang atau menggunakan margin untuk mencapai posisi serupa. Meskipun bukan opsi asli dalam Divi, mereka yang terbiasa dengan CSS tahu bahwa Anda dapat menggunakan float untuk memposisikan elemen ke kanan atau kiri yang bisa sedikit bermasalah dan tidak terduga dalam beberapa kasus. Hal yang sama berlaku untuk menggunakan margin untuk memposisikan elemen. Terkadang sulit untuk memprediksi nilai margin yang tepat untuk memposisikan elemen dengan tepat tanpa meninggalkan spasi yang tidak perlu. Menggunakan posisi absolut bisa menjadi alternatif “pemosisian presisi” yang baik baik untuk float maupun margin.

Dukungan Peramban yang Baik

Properti absolute position didukung secara luas di semua browser utama sehingga Anda biasanya dapat percaya bahwa properti itu tidak akan merusak apa pun di browser lain secara tidak terduga.

Kekurangan

Berikut adalah beberapa kelemahan yang perlu dipertimbangkan saat menggunakan Posisi Absolut:

Risiko Isolasi

Karena elemen yang diposisikan benar-benar keluar dari aliran dokumen normal, mungkin sulit untuk menambahkan elemen tambahan di dekatnya. Mereka menjadi terisolasi dari elemen lain di halaman. Misalnya, biasanya di Divi, jika Anda ingin menambahkan tombol di bawah modul teks, Anda cukup menambahkan modul dan secara otomatis akan berada di bawah modul teks. Tetapi jika modul teks diposisikan secara mutlak, Anda juga harus memposisikan modul tombol secara mutlak dan kemudian menggunakan properti atas, bawah, kiri, dan kanan untuk memposisikan tombol di bawah modul teks. Namun, akan lebih mudah untuk memposisikan kolom (wadah modul induk) secara mutlak sehingga semua modul di dalam kolom dapat mengikuti alur dokumen normal (seperti memposisikan sekelompok modul, bukan satu).

Kurang Responsif

Juga karena elemen yang diposisikan secara mutlak keluar dari aliran dokumen, mungkin sulit untuk membuat pemosisian responsif untuk perangkat seluler. Faktanya, banyak pengembang menghindari position:absolute karena tantangan yang datang dengan desain responsif. Oleh karena itu, penting untuk menggunakan satuan panjang relatif (seperti vw atau %) daripada satuan panjang absolut (seperti px) bila diperlukan.

Menggunakan Titik Lokasi dengan Posisi Absolut

Opsi Lokasi posisi yang dibangun ke dalam pembuat Divi membuatnya sangat mudah untuk memposisikan elemen hanya dengan mengklik titik lokasi. Setelah titik lokasi dipilih, Anda dapat menggunakan offset vertikal dan horizontal untuk membuat penyesuaian posisi tambahan dari titik lokasi tersebut.

Secara default, titik lokasi akan diatur ke kiri atas. Jadi menambahkan offset vertikal dan horizontal ke lokasi itu akan menambah jarak tambahan dari atas dan dari kiri.

Dari lokasi sudut kanan atas, offset vertikal akan menambah ruang dari atas dan offset horizontal akan menambah ruang ke kanan.

Dari lokasi sudut kanan bawah, offset vertikal akan menambah ruang dari bawah dan offset horizontal akan menambah ruang ke kanan.

Dari lokasi pojok kiri bawah, offset vertikal akan menambah spasi dari bawah dan offset horizontal akan menambah spasi dari kiri.

Membuat penyesuaian pada Elemen Mutlak Terpusat

Setiap kali Anda memilih opsi lokasi dengan posisi tengah, Divi menggunakan kombinasi properti CSS untuk memastikan elemen berada di tengah sempurna, berapa pun ukurannya. Misalnya, jika y0u memilih lokasi posisi kiri tengah, Divi akan memposisikan elemen sebagai berikut:

Berikut adalah tampilan CSS di backend.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Bagian atas:50% ada untuk memposisikan bagian atas elemen tepat 50% dari bagian atas wadahnya. Transform:translateY(-50%) ada untuk membawa elemen ke atas tepat setengah tingginya. Ini memberi Anda elemen yang ditempatkan dengan sempurna tidak peduli berapa tingginya.

Ini penting untuk diketahui jika Anda ingin membuat penyesuaian tambahan (atau offset) ke elemen di posisi tengah. Anda tidak ingin membuat kesalahan dengan menggunakan opsi transform translate tanpa mengetahui nilai yang sudah digunakan. Untuk alasan ini, akan lebih baik untuk membuat penyesuaian yang lebih kecil menggunakan properti margin di Divi daripada mengubah terjemahan kecuali Anda memahami apa yang Anda lakukan.

Menggunakan Opsi Transformasi Terjemahan untuk Memposisikan beberapa Elemen Absolut untuk Lokasi Terpusat

Jika Anda memahami bagaimana transform:translate digunakan, sebenarnya bisa sangat berguna untuk mengimbangi elemen yang dipusatkan tanpa harus mengetahui lebar elemen.

Misalnya, katakanlah Anda memposisikan modul untuk dipusatkan baik secara vertikal maupun horizontal dengan kolom di Divi. Ini akan terlihat seperti ini.

Jika saya memberi elemen transformasi terjemahan sebagai berikut, tidak ada yang akan berubah:

• Transformasi Terjemahkan(Y): -50%
• Transformasi Terjemahkan(X): -50%

Ini karena Divi sudah melakukan ini secara otomatis di backend untuk Anda. Mengetahui hal ini, Anda dapat melakukan penyesuaian dari lokasi titik pusat dengan menggunakan opsi terjemahkan transformasi. Dan jika Anda menggunakan satuan persentase panjang, Anda tidak perlu mengetahui lebar atau tinggi modul untuk melakukan penyesuaian karena 100% sama dengan lebar atau tinggi modul. Jadi, jika Anda ingin menambahkan empat modul ke tengah kolom, Anda dapat menggunakan opsi transformasi untuk mengimbangi setiap modul yang benar-benar diposisikan.

Untuk melakukan ini, Anda akan membuat empat modul dan memberi mereka semua posisi absolut dengan lokasi yang dipusatkan secara vertikal dan horizontal.

Kemudian, gunakan opsi transform translate untuk mengatur posisi modul sesuai dengan persentase lebar dan tinggi modul yang sesuai. Misalnya, memberikan modul transformasi nilai sumbu Y -100% akan membawa modul ke atas ketinggian yang tepat dari modul. Memberi modul nilai sumbu X -100% akan memindahkan modul ke kiri sesuai lebar modul. Ini bisa menjadi cara yang bagus untuk menggabungkan elemen yang benar-benar terpusat.

Contoh Kasus Penggunaan: Tombol Pemosisian Benar-benar untuk Blurb Ketinggian yang Sama

Salah satu aplikasi praktis menggunakan posisi absolut di Divi adalah memberikan tombol posisi absolut di dalam kolom sehingga tombol tetap berada di bagian bawah kolom meskipun jumlah (atau tinggi) konten di atasnya dapat berubah. Ini bisa menjadi cara yang bagus untuk menjaga desain tetap konsisten saat menampilkan item di halaman Anda.

Berikut cara melakukannya.

Pertama, tambahkan baris satu kolom ke bagian.

Kemudian tambahkan modul uraian ke kolom.

Selanjutnya, tambahkan modul tombol di bawah modul uraian.

Buka pengaturan baris dan gandakan kolom dua kali untuk mendapatkan total tiga kolom identik masing-masing dengan modul uraian dan tombol yang sama.

Lalu pergi ke pengaturan baris dan pilih opsi untuk menyamakan ketinggian kolom. Ini akan memastikan kolom akan menyesuaikan dengan ketinggian kolom dengan ketinggian terbesar (atau sebagian besar konten).

Sekarang perbarui isi isi dari masing-masing modul uraian sehingga jumlah konten berbeda di setiap kolom. Anda akan melihat bahwa tombol di bawah ini akan berpindah ke posisi tepat di bawah modul uraian, membuat masing-masing tombol berada pada posisi yang berbeda di dalam kolom.

Menggunakan multi-pilih, pilih setiap modul tombol dan perbarui pengaturan elemen berikut untuk setiap tombol:

• Posisi: Absolut
• Lokasi: Kiri Bawah

Ini akan memposisikan masing-masing tombol benar-benar di kiri bawah kolom. Tetapi karena tombol sekarang berada di luar aliran normal elemen pada halaman, Anda akan melihat bahwa ada beberapa tumpang tindih dengan tombol dan modul uraian di kolom paling kiri. Untuk memperbaikinya, kita hanya perlu membuat beberapa ruang sebenarnya untuk tombol dengan menambahkan beberapa padding ke kolom sebagai berikut:

• Padding: 50px bawah

Sekarang Anda memiliki tiga item unggulan dengan penempatan tombol yang konsisten untuk masing-masing meskipun jumlah konten (atau tinggi uraian) dapat berubah.

Pikiran Akhir

Saya harap posting ini menjelaskan tentang properti posisi absolut dan seberapa kuatnya dapat digunakan dalam Divi. Setelah Anda memahami cara kerja posisi, Anda dapat menggunakannya untuk menambahkan segala macam elemen desain yang tepat yang akan membawa situs web Anda ke tingkat berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!