Cara mengatur posisi Absolute dan Relative di CSS

Dalam membuat layout menggunakan CSS, anda dapat menentukan posisi sebuah elemen dengan menggunakan fungsi dari position. Adapun property position tersebut berupa absolute, relative, dan static atau fixed.

Nilai dari static merupakan nilai default dari seluruh elemen yang terlihat dalam html. Relative hampir seperti nilai static, tetapi elemen-eleemennya dapat di set dari posisi orsinil dengan menggunakan nilai top, right, bottom, dan left.

Property fixed pada absolute, tetapi secara teoeri elemen yang menggunakan property ini akan tetap berada pada posisi tersebut walau halaan tersebut kita scroll ke atas atau ke bawah. Namun property fixed ini walau terlihat bekerja lebih baik dalam browser seperti mozilla dan opera, tetapi tidak bekerja sama sekali pada internet explorer.
Penerapannya di dalam dokumen web anda di hitung dari posisi atau koordinat samping kiri atas (absolute) atau mengakalkulasikan dari posisi atau koordinat di mana elemen tersebut di masukan (relative).
Catatan : Sebelum ke kode script, alangkah baiknya anda tahu pengertiannya

Posisi Absolute

Jika anda menentukan posisi ke dalama posisi absolute maka akan di kalkulasikan dari sebelah ujung kiri atas halaman kecuali layer tersebut di definisikan di dalam layer yang lain, dimana dalam kasus ini akan dikalkulasikan dari sebelah ujung kiri atas dari layer utama.
<div style="position:absolute; top:10; left:60; font-family: verdana; font-size:35pt; color: green">

Posisi Relative

Jika anda menentukan pisisi menjadi rekative maka akan di posisikan relative ke dalam tag yang di usung dalam stylenya. Jika anda menambahkan sebuah layer dengan posisi relative di tengah halaman, posisi akan dikalkulasikan tepat dari tempat yang sama dalam tengah halaman di mana ia di tambahkan.
<div style="position:relative; top:50; left:50; color:red; font-size:80px; z-index:4">
Ketika property position mengindikasikan sumber luar dari koordinat sistem, maka property left dan top akan menentukan posisi yang tetap pada layer, yaitu posisi sebelah kiri halaman (left) dan posisi sebelah kanan halaman (right).Anda dapat memasukan baik nilai positif maupun negatif untuk property tersebut. 

Dengan demikian, sangat mungkin untuk menempatkan isi atau content menjadi lebih tinggi dan ke lebih ke kiri dalam halaman di bandingkan posisi logical dalam kode atau script yang di buat dengan menggunakan html di mana layer tersebut di definisikan. Jadi di bawah kode html, anda akan dapat memasukkan kode untuk layer yang di posisikan pada atas halaman yang di hasilkan.

Baik property left maupun tip dapat di ubah secara dinamis dengan menggunakan bahasa javascript. Ini artinya bahwa anda akan dapat menggerakan objek pada layer bahkan setelah halaman web tersebut selesai di load. 

Kegunaan lain dari layer yang di buat dengan CSS adalah berupa menu yang keluar ketika mouse bergerak melewati sebuah link yang telah di berikan script ini.

Property "z-index", berfungsi untuk meletakkan "stacking order" dari layar-layar yang di letakan antara satu dengan yang lain. Nilai z-index yang tertinggi akan menekan elemen yang terendah dan nilai yang terendah akan secara pasti mengikuti aturan di atasnya.

Sebagai contoh, Sebuah permainan kartu di mana kita sebuah as sekop jika berada pada dasar maka dapat di katakan memiliki z-index:52;. Hebatnya lagi bahwa z-index ini dapat di buat menjadi lebih baik lagi menggunakan javascript, tetapi tentu saja kita juga harus menguasai bahasa ini.

Anda dapat membuat beberapa halaman di atas tiap halaman lainnya seleuruhnya dalam sebuah halaman. Ketika pengguna memilih sebuah link, maka akan secara otomatis memindahkan layer dengan info yang kita inginkan di atasnya dari pada membuka sebuah halaman baru.

Tekhnik membuat efek seperti saat ini banyak mengacau pada DHTML (Dinamic HTML atau gabungan antara javascript dan CSS) yang lebih mengarah pada tujuan tersebut.

Salah satu penggunaan properti "z-index" adalah untuk menciptakan bayangan (drop shadow). Contoh berikut adalah penerapan z-index untuk membuat bayangan :
  • <html>
  • <head>
  • <title> Membuat Bayangan<title>
  • <style>
  • .posisi1 {position:relative; top:15; left:25; z-index:10; color:#00000; font-family: arial; font-size:25pt;}
  • .posisi2 {position:relative; top:-22; left:28; z-index:6; color:#00ccff; font-family: arial; font-size:25pt;}
  • .posisi3 {position:relative; top:-59; left:29; z-index:6; color:#ff00ff; font-family: arial; font-size:25pt;}
  • </syle>
  •  </head>
  • <body>
  • <div class="posisi1">Bayangan dengan Layer </div>
  • <div class="posisi2">Bayangan dengan Layer </div>
  • <div class="posisi3">Bayangan dengan Layer </div> 
  • </body>
  • </html>
Dalam browser akan terlihat seperti gambar di bawah ini:



Property terkahir adalah visibility property yang memungkinkan anda membuat layer yang tidak terlihat untuk menambahkan berbagai bentuk pop up menu dan berbagai efek lain dalam halaman anda. Nilai dari peroperty ini adalah "visible" untuk memperlihatkan layer dan "hidden" untuk menyembunyikan layer.

Dengan dynamic html akan memudahkan anda mengbah penampakan dari layer menurut masing-masing event. Kegunaan yang paling umum adalah dalam membuat menu yang dapat keluar (pop up), seperti menu statt dalam windwos di mana sub-menu-sub-menu yang akan keluar (pop up) tersebut harus di buat sebagai layer yang tidak terlihat (invisble layer).

Kemudian, sebuah mouse melintas di atas sebuah link maka layer yang kita tentukan akan terlihat. Namun browser netscape agaknya kurang mendukung teknologi css ini. Berikut adalah contoh pembuatan dokumen dengan properti "visibility", yang menerima nilai "visible" dan "hidden".
  • <html>
  • <head>
  • <title>Property visibility</title>
  • </head>
  • <div style="position: absoulte; top:10; left:50; font-family:verdana; font-size:30pt; color:green; font-variant:small-caps;">
  • Contoh Properti Visibility :</div>
  • <div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:hidden;">
  • 1. Teks ini tidak terlihat karena visibility : hidden
  • </div>
  • <div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family:verdana; font-size:20pt; color:red; visibility:visible;"> 
  • 2. Teks ini telihat karena visibility : visible
  • </div>
  • </body>
  • </html>
Dalam browser akan terlihat seperti gambar di bawah ini:



Selain properti di atas, ada lagui yang namanya float. seperti artinya yaitu mengapung, maka elemen yang akan di buat ke kanan atau ke kiri dari sebuah garis dengan isi yang melingkupnya. Floating di gunakan untuk memosisikan elemen yang lebih keci dalam sebuah halaman, contoh script di bawah:
#navigasi {float: left; width:10px;}
#navigasi {float: right; width:10px;}
#isi {margin:0 10px;} 
Jika anda tidak menginginkan elemen berikutnya elemen berikutnya mengelilingi objek yang di floating. Anda dapat menerapkan propery clear.
  • Clear: left (akan menghilangkan elemen float kiri)
  • Clear: Right (akan menghilangkan elemen float kanan)
  • Clear: Both (akan menghilangkan elemen float kiri dan kanan).
Sebagai contoh, jika anda membuat sebuah footer dalam halaman, anda dapat menambahkan sebuah id footer dan membahkan :
#footer {clear: both;)
contoh:
  • <html>
  • <head>
  • <title>Belajar float</title> 
  • <style>
  • #navigasi {float: left; width:10px;}
  • #navigasi2 {float: right; width:50px;}
  • #footer {clear:both;} 
  • </style>
  • </head>
  • <body>
  • <div id=navigasi> float kiri</div>
  • <div id=navigasi2> float kanan</div>
  • <div id=footer> clear float</div>
  • </body>
  • </html> 
Jika di lihat di dalam browser akan terlihat seperti gambar di bawah ini:


Cukup sekian pembahasan kali ini, terimakasih sudah mau membaca artikel ini, sampai jumpa dan salam Sukai Penulis
Previous
Next Post »
0 Komentar