Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS)

A.    Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Baca Juga : Cara Memposisikan Website Menjadi Absolute (Positioning CSS)

Fungsi  CSS
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara Kerja CSS
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

B. Fixed CSS
Sifat dari position fixed hampir sama dengan absolute, namun posisi dari elemen fixed akan tetap berada posisi yang ditentukan walaupun browser dizoom-in/out atau discrollke atas atau ke bawah.

untuk lebih jelas dan pahamnya, mari kita lakukan percobaan. Silahkan buat file baru dan beri nama fixed.html lalu ketikkan kode berikut:

Hasil dari kode diatas adalah:

Bisa temen-temen lihat posisi header yang berwarna biru tetap pada posisinya walau kita scroll keatas.

Tersedia di Bacacoding:

• Cara memposisikan web menjadi Static
• Cara memposisikan Web menjadi Relative
• Cara memposisikan web menjadi absolute

Bagian Header pada TWITTER menggunakan position fixed sehingga ketika anda men-scroll halaman web, bagian tersebut tetap berada disana.

Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS)? Mungkin itu saja tulisan yang membahas tentang Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

Share :