4 Posisi mengatur Obyek dengan CSS

Ada 4 posisi untuk mengatur obyek baik teks atau image dalam blog dengan menggunakan CSS

Sahabatku yang berbahagia, berikut ini akan saya sampaikan masalah mengatur posisi obyek baik teks atau gambar atau image dalam blog agar dapat ditempatkan pada tempat yang sesuai dengan kehendak kita. Adapun caranya dengan menggunakan perintah tag CSS, dimana posisi tersebut terbagi dalam tiga kelompok yaitu:

1. Posisi Statis

Posisi statis bersifat default dari pengaturan elemen dimana elemen akan diposisikan sesuai urutan elemen dalam sebuah halaman yang tidak terpengaruh pada properti top, bottom, right dan left seperti berikut :

.inner{background:img(src=http://......) no repeat;
position-top:10px,position-right:10px;position-bottom:10px;position-left:10px;
yang selanjutnya diletakkan untuk menentukan pudding dan margin dengan urutan tag :
 
pudding:10px 10px 10px 10px;
margin:0 auto 50px auto;
}

2. Posisi fixed

Posisi pengaturan elemen dimana posisi elemen adalah fix terhadap jendela browser, meskipun di scroll layar kita, maka elemen tersebut akan tetap tak berpindah. Posisi fixed ini tentu saja tidak mengikuti aliran pengaturan elemen secara normal dan posisi dapat mengoverlap posisi elemen yang lain, contohnya al. :

.sharebutton 
{
position:fixed;
top:10%;
right:0px;
}

Hasil tag tersebut obyek akan fix di 10% dari atas dan di tepi paling kanan.
3. Posisi Relative

Tag ini sebagai css untuk mengatur posisi element relatif terhadap posisi normalnya, sehingga kita dapat menyesuaikan dengan elemen yang lain karena obyek dapat diatur bergeser atau overlap terhadap elemen yang lain. Contohnya al.:

.comment
{position:relative;
right:20px;
}

4. Posisi Absolut

Absolut untuk mengatur posisi elemen absolut terhadap halaman website atau blog, sehingga dapat terjadi overlap terhadap elemen yang lain, contohnya al.:

.image 
{
position:absolute;
left:0px;
top:10px;
}

Untuk mengatur elemen yang overlap, kita memerlukan properti tambahan, yaitu z-index. Dimana nilai dari z-index tersebut akan menentukan posisi elemen yang overlap. Nilai yang lebih besar akan menempatkan posisi lebih ke atas, contohnya al.:

.image 
{
position:absolute;
left:0px;
top:10px;
z-index:1;
}

Demikian info dari saya yang singkat semoga bermanfaat. Contoh posisi obyek dalam blog ini bisa Anda perhatikan tombol yang ada di sisi kiri tulisan ini.
Wassalamu'alaikum Warakhmatullahi Wabarakatuh.

Bergabunglah bersama kami dengan para Mentor Bisnis ternama !

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone.

Anda tertarik dengan tulisan ini? silahkan saya tunggu "review saya disini" dan saya akan review balik jika Anda menyertakan alamat lengkapnya, trims.