Posisi CSS telah lama menjadi bagian penting dalam pembuatan tata letak situs web. Bahkan dengan munculnya teknik tata letak CSS seperti Flexbox dan CSS Grid, pemosisian masih memiliki tempat penting dalam tas trik desainer web mana pun.
Ketika menggunakan posisi CSS, hal pertama yang perlu Anda lakukan adalah menetapkan properti CSS untuk posisi untuk memberi tahu browser apakah Anda akan menggunakan posisi absolut atau relatif untuk elemen tertentu. Anda juga perlu memahami 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
Pemosisian Statis
Statis adalah posisi default untuk setiap elemen di halaman web. Jika Anda tidak menentukan posisi elemen, itu statis, yang berarti bahwa itu akan ditampilkan di layar berdasarkan di mana itu dalam dokumen HTML dan bagaimana ia ditampilkan di dalam aliran normal dokumen itu.
Jika Anda menerapkan aturan pemosisian seperti teratas atau kiri ke elemen yang memiliki posisi statis, aturan-aturan itu diabaikan, dan elemen tetap di tempat ia muncul dalam aliran dokumen normal. Anda jarang, jika pernah, perlu mengatur elemen ke posisi statis di 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 tidak diposisikan secara statis. Karena elemen yang benar-benar diposisikan diambil dari aliran normal dokumen, itu mempengaruhi bagaimana elemen sebelum atau sesudahnya dalam HTML diposisikan pada halaman web. Sebagai contoh, jika Anda memiliki divisi yang diposisikan menggunakan nilai relatif dan di dalam divisi itu, Anda memiliki paragraf yang ingin Anda posisikan 50 piksel dari bagian atas divisi, Anda menambahkan nilai posisi mutlak ke paragraf itu bersama dengan nilai offset 50 piksel pada teratas properti, seperti ini: posisi: absolut;atas: 50px;
Elemen yang benar-benar diposisikan ini selalu menampilkan 50 piksel dari atas divisi yang relatif terposisikan, tidak peduli apa pun yang ditampilkan di sana dalam aliran normal. Elemen Anda benar-benar diposisikan menggunakan yang relatif diposisikan sebagai konteksnya, dan nilai posisi yang Anda gunakan relatif terhadap itu. Keempat properti pemosisian yang Anda miliki untuk digunakan adalah: Anda dapat menggunakan keduanya teratas atau bawah - karena suatu elemen tidak dapat diposisikan menurut kedua nilai ini - dan juga kanan atau kiri. Jika suatu unsur diatur ke posisi absolut, tetapi ia tidak memiliki nenek moyang yang secara non-statis diposisikan, maka ia diposisikan relatif terhadap elemen tubuh, yang merupakan elemen tingkat tertinggi dari halaman. Pemosisian relatif menggunakan empat sifat pemosisian yang sama sebagai posisi absolut, tetapi alih-alih mendasarkan posisi elemen pada leluhur terdekat yang tidak diposisikan secara statis, ia memulai dari mana elemen akan menjadi jika masih dalam aliran normal. Misalnya, jika Anda memiliki tiga paragraf di halaman web Anda, dan yang ketiga memiliki a posisi: relatif gaya ditempatkan di atasnya, posisinya diimbangi berdasarkan lokasi saat ini. Paragraf 1. Paragraf 2. Paragraf 3. Dalam contoh di atas, paragraf ketiga diposisikan 2em dari sisi kiri elemen kontainer tetapi masih di bawah dua paragraf pertama. Itu tetap dalam aliran normal dokumen dan diimbangi sedikit. Jika Anda mengubahnya posisi: mutlak, apa pun yang mengikutinya akan ditampilkan di atasnya karena tidak lagi dalam 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 umum dalam desain web, pembagian itu dapat diatur ke posisi relatif sehingga apa pun di dalamnya dapat menggunakannya sebagai konteks pemosisian. 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. Segala sesuatu yang lain di halaman kemudian bergulir melewati elemen itu. Untuk menggunakan nilai properti ini, Anda menetapkan: posisi: diperbaiki;
Perlu diingat, ketika Anda memperbaiki elemen di situs Anda, itu mencetak di lokasi itu ketika halaman web Anda dicetak. Misalnya, jika elemen Anda ditetapkan 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; } }
Pemosisian Relatif
Bagaimana Dengan Posisi Tetap?
