Trik CSS: Cara Membuat Konten Melayang

Saya menemukan cara menggunakan kode CSS untuk membuat konten yang selalu tampil di posisi yang ditentukan walaupun pengunjung melakukan scrolling ke bawah. Trik tersebut saya aplikasikan dengan memasang beberapa tombol berbagi di sisi kiri blog ini.

Berikut adalah cara-caranya:

1. Buat konten dalam div seperti format berikut:

<div class='layang'>
KONTEN
</div>

Kode tersebut dapat disimpan di bagian paling bawah template. Saya menyimpannya tepat sebelum kode </html>

2. Atur dengan CSS

.layang {
position:fixed;
left:5px;
top:60px;
width:32px;
}

Keterangan:

• Kode warna biru mengatur agar konten berada di sebelah kiri dengan jarak 5 pixel. Anda bisa mengganti left menjadi right jika ingin konten berada di sebelah kanan. Anda juga bisa mengganti jaraknya sesuai keinginan.
• Kode warna hijau mengatur agar konten berada di sebelah atas dengan jarak 60 pixel. Anda bisa mengganti top menjadi bottom jika ingin konten berada di sebelah bawah. Anda juga bisa mengganti jaraknya sesuai keinginan.
• Kode warna orange mengatur lebar komponen, sesuaikan dengan isi konten.