Pemosisian CSS Lebih dari Hanya X, Y Koordinat
Posisi CSS telah lama menjadi bagian penting dalam pembuatan tata letak situs web. Bahkan dengan munculnya teknik tata letak CSS yang lebih baru seperti Flexbox dan CSS Grid, pemosisian masih memiliki tempat penting dalam tas trik perancang web mana pun.
Ketika menggunakan posisi CSS, hal pertama yang perlu Anda lakukan adalah menetapkan properti CSS untuk posisi untuk memberi tahu browser jika Anda akan menggunakan posisi absolut atau relatif untuk elemen tertentu. Anda juga perlu memahami dengan jelas perbedaan antara dua properti pemosisian ini.
Sementara absolut dan relatif adalah dua properti posisi CSS yang paling sering digunakan dalam desain web, sebenarnya ada empat status properti posisi:
- statis
- mutlak
- relatif
- tetap
Statis adalah posisi default untuk setiap elemen di halaman web. Jika Anda tidak menentukan posisi elemen, itu akan statis. Ini berarti bahwa itu akan ditampilkan di layar berdasarkan di mana itu di dokumen HTML dan bagaimana itu akan ditampilkan di dalam aliran normal dokumen itu.
Jika Anda menerapkan aturan pemosisian seperti atas atau kiri ke elemen yang memiliki posisi statis, aturan tersebut akan diabaikan dan elemen akan tetap di tempat ia muncul dalam aliran dokumen normal. Sebenarnya, Anda akan jarang, jika pernah, perlu mengatur elemen ke posisi statis dalam CSS karena itu adalah nilai default.
Pemosisian CSS Mutlak
Pemosisian absolut mungkin adalah posisi CSS yang paling mudah untuk dipahami. Anda mulai dengan properti posisi CSS ini:
posisi: absolut;Nilai ini memberitahu browser bahwa apa pun yang akan diposisikan harus dihapus dari aliran normal dokumen dan bukannya ditempatkan di lokasi yang tepat di halaman. Ini dihitung berdasarkan leluhur terdekat yang secara non-statik diposisikan.
Karena elemen yang benar-benar diposisikan diambil dari aliran normal dokumen, itu tidak akan mempengaruhi bagaimana elemen sebelum atau sesudahnya di HTML diposisikan pada halaman web.
Sebagai contoh - jika Anda memiliki divisi yang diposisikan menggunakan nilai relatif (kita akan melihat nilai ini segera), dan di dalam divisi itu Anda memiliki paragraf yang ingin Anda posisikan 50 piksel dari bagian atas divisi, Anda akan menambahkan nilai posisi "absolut" ke paragraf itu bersama dengan nilai offset 50px pada properti "atas", seperti ini.
posisi: absolut; atas: 50px;Elemen ini benar-benar diposisikan kemudian akan selalu menampilkan 50 piksel dari atas divisi yang relatif diposisikan - tidak peduli apa pun yang ditampilkan di sana dalam aliran normal. Elemen posisi "benar-benar" Anda menggunakan posisi yang relatif diposisikan sebagai konteksnya dan nilai pos yang Anda gunakan relatif itu.
Keempat properti pemosisian yang Anda miliki untuk digunakan adalah:
- puncak
- kanan
- bawah
- kiri
Anda dapat menggunakan atas atau bawah (karena suatu elemen tidak dapat diposisikan sesuai dengan kedua nilai ini) dan kanan atau kiri.
Jika suatu unsur diatur ke posisi absolut, tetapi di sana ia tidak memiliki nenek moyang yang secara non-statis diposisikan, maka ia akan diposisikan relatif terhadap elemen tubuh, yang merupakan elemen tingkat tertinggi dari halaman.
Pemosisian Relatif
Kami sudah menyebutkan posisi relatif, jadi mari kita lihat properti itu sekarang.
Pemosisian relatif menggunakan empat sifat pemosisian yang sama sebagai posisi absolut, tetapi alih-alih mendasarkan posisi elemen pada leluhur terdekat yang non-statis, ia memulai dari mana elemen akan menjadi jika masih dalam aliran normal.
Misalnya, jika Anda memiliki tiga paragraf di laman web Anda, dan yang ketiga memiliki gaya "posisi: relatif" yang ditempatkan di atasnya, posisinya akan diimbangi berdasarkan lokasi saat ini.
Paragraf 1.
Paragraf 2.
Paragraf 3.
Dalam contoh di atas, paragraf ketiga akan diposisikan 2em dari sisi kiri elemen penampung, tetapi masih akan berada di bawah dua paragraf pertama. Itu akan tetap dalam aliran normal dokumen, dan hanya diimbangi sedikit. Jika Anda mengubahnya ke posisi: absolut; apa pun yang mengikutinya akan ditampilkan di atasnya, karena itu tidak lagi berada di aliran normal dokumen.
Elemen pada halaman web sering digunakan untuk menetapkan nilai posisi: relatif tanpa nilai offset ditetapkan, yang berarti bahwa elemen tetap persis di mana ia akan muncul dalam aliran normal. Ini dilakukan semata-mata untuk menetapkan elemen itu sebagai konteks yang dapat diposisikan secara tepat oleh elemen-elemen lain. Misalnya, jika Anda memiliki divisi yang mengelilingi seluruh situs web Anda dengan nilai kelas "wadah" (yang merupakan skenario yang sangat umum dalam desain web), pembagian itu dapat diatur ke posisi relatif sehingga apa pun yang ada di dalamnya dapat menggunakan itu sebagai konteks pemosisian.
Bagaimana Dengan Posisi Tetap?
Penentuan posisi tetap sangat mirip dengan penentuan posisi absolut. Posisi elemen dihitung dengan cara yang sama seperti model absolut, tetapi elemen tetap kemudian diperbaiki di lokasi tersebut - hampir seperti tanda air . Semua yang lain di halaman akan bergulir melewati elemen itu.
Untuk menggunakan nilai properti ini, Anda akan mengatur:
posisi: diperbaiki;Perlu diingat, ketika Anda memperbaiki elemen di situs Anda, itu akan dicetak di lokasi itu ketika halaman Web Anda dicetak. Misalnya, jika elemen Anda tetap di bagian atas halaman Anda, elemen itu akan muncul di bagian atas setiap halaman yang dicetak - karena itu tetap di bagian atas halaman. Anda dapat menggunakan jenis media untuk mengubah cara halaman cetak menampilkan elemen tetap:
@media screen {h1 # first {position: fixed; }} @media cetak {h1 # first {position: static; }}Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 1/7/16.