Position:Fixed Bar Static

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
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 atas layar dengan tulisan "IDIN ROHIDIN | Personal Blog" dan "Form Pencarian" 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 class='box_atas'>
Tulisan Anda disini.....
</div>

Atau Anda dapat menambahkan satu class pada file CSS seperti pada kode berikut:

.box_atas{
position: fixed;
z-index:500000;
left: 0;
top: 0;
right: 0;
height: 30px;
background: #f4f4f4;
border-bottom: 2px solid #cccccc;
text-align: center
}

dan menambahkan atribut class="box_atas" pada element HTML Anda:

<div class='box_atas'>
<div class='toppic'>
<div style='float:left;margin-top: -2px;margin-left: 168px;'>
<div class='tshadow'>IDIN ROHIDIN | Personal Blog</div>
</div>
<div id='search' style='float: right; margin-top: -2px;margin-right: 178px; width: 300px; overflow: hidden;'>

<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Mencari artikel...&apos;;}' onfocus='if (this.value == &apos;Mencari artikel...&apos;) {this.value = &apos;&apos;;}' type='text' value='Mencari artikel...'/>
<input id='searchsubmit' src='https://lh6.googleusercontent.com/- AijyKcSl3MA/TlABuqsPWjI/AAAAAAAADkY/LWbEeH5IG-Y/ico-search.gif' type='image' value='Go'/>
</form>
</div>
</div>
</div>

Penjelasan Style
Pada class box_bawah tersebut, terdapat 9 atribut yang di set untuk class tersebut, yang masing-masing memiliki arti sebagai berikut:

1. position:fixed
   Style ini akan membuat element yang memiliki class tersebut ditampilkan tetap pada layar browser, walaupun user melakukan scroll dokumen.
2. 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.
3. left:0
   Style ini akan membuat element berada pada posisi paling kiri dari layar
4. top:0
   Style ini akan membuat element berada pada posisi paling atas dari layar
5. 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.
6. height:30px
   Style ini akan membuat element memiliki tinggi sebesar 30 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.
7. background:#f4f4f4;
   Style ini akan membuat element memiliki warna latar silver.
8. border-bottom: 2px solid #cccccc;
   Style ini akan membuat element memiliki garis solid berwarna abu-abu sebesar 2 pixel.
9. text-align:center
   Style ini akan membuat teks dalam element rata tengah.

Semoga tutorial yang sedikit ini dapat membantu sobat dalam membangun Blog yang profesional, jika masih menemui kendala silahkan tinggalkan komentar.