Kali ini saya akan membahas satu properti menarik dari CSS yang jarang digunakan, atau mungkin jarang diketahui oleh para disainer web, yaitu position:fixed.
position:fixed merupakan properti untuk memposisikan suatu blok element secara tetap di atas layar browser walaupun user melakukan scroll dokumen.
Pada blog ini, Anda dapat melihat bar/kotak di paling bawah layar dengan tulisan "BAR DI BAWAH ALA FACEBOOK CHAT" yang akan tetap berada di sana walaupun Anda melakukan scroll ketika membaca blog ini. Untuk implementasi style tersebut, Kita cukup menambahkan atribut style pada element yang diinginkan dengan isi sebagai berikut:
<div style="position: fixed; z-index:500000; left:0; bottom: 0; right: 0; height: 40px; background: #eeeeee; border-top: 1px solid #aaaaaa; text-align: center;">
<b>BAR DI BAWAH ALA FACEBOOK CHAT</b><br />
... Tulisan Lainnya ...
</div>
Atau Anda dapat menambahkan satu class pada file CSS seperti pada kode berikut:
Lihat Source Code
.box_bawah{
position: fixed;
z-index:500000;
left: 0;
bottom: 0;
right: 0;
height: 40px;
background: #eeeeee;
border-top: 1px solid #aaaaaa;
text-align: center
}
dan menambahkan atribut class="box_bawah" pada element HTML Anda:
<div class="box_bawah">
<b>BAR DI BAWAH ALA FACEBOOK CHAT</b><br />
... Tulisan Lainnya ...
</div>
Penjelasan Style
Pada class box_bawah tersebut, terdapat 9 atribut yang di set untuk class tersebut, yang masing-masing memiliki arti sebagai berikut:
position:fixed
Style ini akan membuat element yang memiliki class tersebut ditampilkan tetap pada layar browser, walaupun user melakukan scroll dokumen.
z-index:50000
Style ini akan membuat element memiliki posisi index sebesar 50000, maksudnya posisi index adalah posisi stack/tumpukan, semakin tinggi nilai z-index, maka semakin di atas posisi elementnya. Style ini berguna agar element yang dimaksud tidak tertimpa oleh element-element lainnya yang memiliki z-index lebih besar dari element tersebut. Dan bila z-index nya sama, maka dilihat dari jenis positionnya, biasanya element yang memiliki position:relative dan position:absolute selalu berada di atas element lainnya yang tidak memiliki properti position pada style-nya.
left:0
Style ini akan membuat element berada pada posisi paling kiri dari layar
bottom:0
Style ini akan membuat element berada pada posisi paling bawah dari layar
right:0
Style ini akan membuat element berada pada posisi paling kanan dari layar. Karena width tidak di set, dan posisi left di set menjadi 0, maka tampilan element akan memanjang penuh dari kiri ke kanan.
height:40px
Style ini akan membuat element memiliki tinggi sebesar 40 pixel. Karena posisi top tidak di set dan posisi bottom di set menjadi 0, maka posisi top akan relatif di hitung dari posisi paling bawah layar dikurangi tinggi element. Misalnya bila layar browser tingginya 800px, maka posisi top dari element akan menjadi 800-40=760px.
background:#eeeeee;
Style ini akan membuat element memiliki warna latar silver muda.
border-top: 1px solid #aaaaaa
Style ini akan membuat element memiliki garis solid berwarna abu-abu muda sebesar 1 pixel.
text-align:center
Style ini akan membuat teks dalam element rata tengah.
Mungkin hanya itu lah sedikit tips tentang position:fixed pada CSS yang dapat dimanfaatkan ketika Kita akan melakukan design Web, dengan didukungnya peletakan posisi fixed ini Kita dapat lebih berkreasi dengan tampilan website yang sedang Kita bangun.
0 komentar:
Posting Komentar