Sahabat harviacode, berikut ini kita akan membuat halaman dengan banner yang posisi tetap. Apabila discroll ke bawah, maka konten akan menutupi banner, sedangkan posisi banner tetap. Berikut ini adalah demonya.

Dasar

Baik untuk membuatnya buatlah file index.php dengan kode sebagai berikut

Yang perlu menjadi kunci pada tutorial ini adalah posisi fixed untuk header dan banner, sedangkan pada content posisinya adalah relative. Sehingga saat discroll, posisi header dan banner tidak berubah. Selain itu nilai z-index header yang lebih besar dari content akan menjaga header berada pada posisi di atas content.

Jalankan index.php melalui browser anda dan cobalah scroll ke bawah, maka posisi header dan banner akan tetap selanjutnya content akan menutup banner.

Percantik Tampilan

banner
Setelah berhasil membuat dasarnya, tinggal kita percantik tampilannya dengan menambahkan menu, gambar pada banner serta konten. Berikut ini adalah kode index.php setelah kita lengkapi dengan menu, gambar dan konten.

Mudah bukan, anda bisa mengkombinasikan dengan bootstrap agar tampilan menjadi lebih menarik dan responsive. Terima kasih telah berkunjung ke harviacode.com. Silahkan berkomentar di kolom komentar di bawah ini.