CSS position Property

Pengaturan posisi elemen html dapat dilakukan dengan menggunakan margin dan property left, top, right & bottom. Tutorial css tentang position property akan sangat membantu dalam memahami pengaturan posisi elemen html. Mempelajari pengaturan posisi elemen sekaligus juga akan membuat kita belajar css lebih detail tentang left, top, right dan bottom property serta hubungannya dengan position property.

CSS position Property

Ada beberapa nilai dari css position property yang masing-masing mempunyai fungsi dan kegunaan berbeda.
  • inherit » position:inherit;
  • relative » position:relative;
  • absolute » position:absolute;
  • fixed » position:fixed;
  • static » position:static;
position:inherit
Nilai position property "inherit" jarang digunakan dan menggunakan nilai ini akan membuat elemen mengacu pada elemen induk.
position:relative
Penggunaan nilai "relative" membuat posisi elemen diatur dengan properti left, right, top atau bottom. Satuan bisa menggunakan pixel (px), em atau % (persen).
Selain pengaturan posisi melalui ke-4 property di atas, dapat pula dilakukan dengan memanfaatkan margin property.
Contoh :
<style type="text/css">
div{
       width:200px;
       height:100px;
       background:blue;
       margin:20px auto;
}
</style>

<div>Content here!</div>
<style type="text/css">
div{
       width:200px;
       height:100px;
       background:blue;
       margin:10px;
       left:30px;
       top:20px;
}
</style>

<div>Content here!</div>
position:absolute
"Absolute" membuat elemen bersifat "melayang". Pengaturan posisi dilakukan dengan properti left, right, top & bottom. Untuk membuat sebuah elemen dengan posisi "absolute", elemen tersebut harus berada dalam elemen lain yang menggunakan posisi "relative". 
<style type="text/css">
div.relatif{
        position:relative;   
        width:400px;
        height:200px;
        margin:20px 0;
        background:blue;
        left:40px;
        top:20px;
}
div.absolut{
        position:absolute;
        width:300px;
        height:100px;
        background:red;
        left:30px;
        bottom:10px;
        text-align:center;
        padding:30px 15px; 
}
</style>

<div class="relatif">
     <div class="absolut">Content here!</div>
</div>
position:fixed
Fixed position mendasarkan perhitungan posisi pada "body" dan pengaturannya dilakukan melalui left, top, bottom dan right property. Ketika "position:fixed" digunakan pada sebuah elemen, maka elemen tersebut akan selalu pada posisi tertentu dan akan tetap pada posisinya sekalipun halaman digulung hingga ujung terbawah. Posisi elemen biasanya diatur pada bagian atas halaman sehingga ketika halaman dibuka maka elemen yang "dalam position:fixed" akan langsung terlihat dan selalu terlihat. Coba anda lihat box disisi sebelah kiri! Box tersebut menggunakan kode seperti di bawah ini: 
<style type="text/css">
div.pixed{
        position:fixed;
        width:200px;
        height:60px;
        background:#000;
        left:10px;
        top:150px;
        text-align:center;
        padding:20px 15px;
        font:14px bold Arial;
        color:#fff;   
}
</style>

<div class="pixed">Content here!</div>
position:static
Pengaturan posisi dilakukan menggunakan margin property. 
<style type="text/css">
div.statis{
        position:static;
        width:200px;
        margin:20px 0;
        height:100px;
        background:#aaa;
        text-align:center;
        padding:20px 15px;  
}
</style>

<div class="statis">Content here!</div>
position:fixed
Di bawah telah disertakan demo pengaturan elemen berdasar "position property". Lakukan beberapa perubahan terhadap css property ataupun nilainya untuk mendapatkan berbagai perbedaan pengaturan dan bentuk elemen.

Please click the button to display. Continue with editing code and click to see the results!
Diposting oleh di
Label: ,

2 komentar:

Langganan: Posting Komentar (Atom)

My ProfileC l o s e

FollowerC l o s e