Pemahaman tentang Position pada CSS

Level: BASIC

Pemahaman di dalam CSS sangat penting diketahui khususnya buat kalian sebagai web designer yang sering bergelut dalam masalah mengatur layout, tata letak, peletakan suatu elemen di halaman web dan lain-lain…

Beberapa properti yang berperan banyak dalam CSS untuk masalah layout antara lain:

Position
Float
Margin
Padding
Position
Top, Left, Right, Bottom
Display

Mungkin ada beberapa properti lainnya, yaa secara umum seperti yang disebutin di atas lah .

Nah, kali ini Cheyuz mw ngejelasin tentang position pada CSS…
Selain Float, Position juga sangat berperan penting buat layout, terutama layout yang mempunyai banyak embel-embel ga penting (peace ) di dalamnya, misalnya ketika gambar ketika dihover keluar tooltip, gambar berbingkai, membuat taskbar, dan lain-lain…

OK, kita jelasin atu atu ye…

position: static

Position static adalah position default suatu elemen, bisa disebut statis (?) maksudnya dia diam, tata letak normal seperti div biasa, dan pada posisi initop, left, right, dan bottom tidak mempengaruhi posisi elemen tersebut, contohnya:

#wrap{
    width:150px;
    background:black;
    height:75px;
}
.pertama {
    width:55px;
    background:gray;
    position:static;
    top:20px;
    left:20px;
}
.kedua{
    width:55px;
    background:red;
    top:100px;
    left:100px;
    clear:both;
}

Ini adalah div pertama

Ini adalah div kedua

Penjelasan:

Jadi, di situ terlihat ada 3 elemen div, yaitu wrapper, div pertama dan div kedua… di situ tidak ada posisi yang terdefinisi terlebih dahulu. Div pertama dan kedua memakai position static. Top dan Left di div kedua tidak berpengaruh terhadap posisi elemen tersebut, karena sifatnya yang statis, dan ngebentuk pola vertical (maksudnya garis baru setelah div sebelumnya) secara normal, kalo pengen nge-horizontal, berikan property float dengan nilai left…

position: relative

Nah, ini dia position yang sering digunakan pada seorang web designer… kalo pake position ini, kamu bisa memanfaatkan left dan top buat ngubah posisi tersebut.. tetapi perlu diingat, sifat position:relative ini adalah dia bakal pindah kalo kita beri nilai top atau left, tetapi relative terhadap dirinya sendiri… (pusing?) kasi contoh daah…

#wrap{
    width:150px;
    background:black;
    height:75px;
}
.pertama{
    width:55px;
    background:gray;
    position:static;
    top:10px;
    left:15px;
    position:relative;
}
.kedua{
    position:relative;
    width:55px;
    background:red;
    top:15px;
    left:5px;
    clear:both;
}

Ini adalah div pertama

Ini adalah div kedua

Penjelasan

Pada contoh di atas, div pertama telah digeser sejauh 10px dari atas (top) dan 15px dari kiri (left). Div kedua tergeser 15px dari atas (top) dan 5px dari kiri (left). Jadi, elemen bakal tergeser kalo dia punya boundary (div pembungkus, wrapper), kita ga bisa menggeser elemen tanpa boundary,,gimana caranya supaya kita bisa menggeser div pertama jauh lebih bawah (dengan menaikkan topnya) hingga menembus garis batas wrap? coba ganti nilai top dari div pertama menjadi 100px. Apa yang terjadi? wow ternyata si div kedua juga ikut tergeser! posisi div kedua akan disesuaikan dengan posisi div yang pertama, terbatas… untuk kasus sperti ini, gunakan absolute.

position: absolute

Kalo kita menggunakan position ini, kita bisa mengatur left, top, right, dan bottom sesuai dengan parent yang mempunyai position relative… jadi elemen yang pake position absolute ini bisa diatur posisinya tergantung parent maupun screen browser.. Contoh CSSnya sperti brikut:

#wrap{
    width:150px;
    background:black;
    height:200px;
    position:relative;
}
.ketiga {
    position:absolute;
    background:red;
    width:100px;
    bottom:0px;
    left:15px;
}

ini adalah div 3 dengan position absolute

position: absolute (terhadap layar)

Kalo kita pake position absolute terhadap layar, maka parent dari div ini jangan memakai position yang “relative”, tetapi statis.. supaya tidak absolute terhadap parent, tapi terhadap layar… contohnya seperti gambar kotak di sudut kanan atas, coba dilihat, hehe….
CSS nya seperti ini:

.kotak {
    position:absolute;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:50px;
}

ini contoh CSS yang absolute terhadap screen

Penjelasan

Kotak yang ada di kanan atas adalah kotak yang sudah diberi position absolute (tidak relative terhadap parent) yang relative terhadap screen/layar browser… kalo kita ngeset bottom = 0 dan menghapus top = 50px, maka letak si kotak bakal pindah ke bawah, jadi left, right, top, dan bottom berpengaruh untuk posisi berdasarkan screen

position: fixed

Naah klo yang ini baru beda sama yang lain… yaa sebenernya sama sih.. , lebih mirip ke position:absolute.. sama seperti position absolute yang berdasarkan screen browser, tetapi bedanya, state/letak si kotak bakal tetep berada di posisi screen sebelumnya, walaupun browser discroll… contohnya lihat gambar kotak warna hitam di sebelah kanan, dan contoh lain adalah taskbar di bawah

.kotak_fixed {
    position:fixed;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:250px;
    color:white;
}

Ini adalah contoh kotak yang diberi position:fixed

Penjelasan

jadi div yang diberi class kotak_fixed itu diberi position fixed, jadi left, right, bottom, dan top nya mempengaruhi posisi berdasarkan layar browser, dan posisinya selalu tetap, walaupun halaman discroll ke bawah…

Nah, paling itu aja temen2 pembahasannya…
teori-teori yang lain tentang CSS juga bakal disampein lagi…

Pokoknya sekarang kita fokus ke web developing.. jadi mulai dari CSS, Javascript, PHP, hingga framework pun bakal dibahas di blog ini…

Mudah-mudahan bermanfaat buat kita sebagai web developing…

This entry was posted on Thursday, February 18th, 2010 at 08:17 and is filed under CSS, Tutorial, _other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Mauladi

Mar 18th

Mas Cheyuz, tulis dong.. referensinya.. supaya kira sama-sama pintar
Cheyuz

Mar 27th

ke http://dynamicdrive.com aja
anonymus

May 30th

mkasih ya bro

sangat membantu bagi saya yg ingin belajar css

salam
Cheyuz

Jun 1st

sip, sama2 gan
david

Jul 13th

nice share to learning …
boen

Jul 25th

terima kasih kawan…mudah2an semakin banyak orang kayak cheyuz…bermanfaat bgt…terus menulis ya..
Cheyuz

Jul 27th

@boen: Hehehe thankz ya…:)
asep

Sep 18th

wah ..mantap gan.nice inpo nihh..
klo yang di bawah itu pake position:fixed juga ya gan ?
yang ada translate trus akun FB gitu gan ???
Cheyuz

Sep 22nd

@asep: iya gan… itu jenis fixed.. tapi itu bukan saya yg bikin.. itu dipasang pake Wibiya… coba cari di google buat Wibiya..
Tutorial CSS Layout Part I - CSS Fixed 2 Column | Harian Cheyuz

Sep 25th

[...] untuk sidebar menjadi di sebelah kiri, untuk pembahasan float dan posisi lainnya di CSS, baca Pemahaman Position pada CSS, kemudian sidebar mempunyai lebar 200 pixel, dan ditambahkan padding 5 pixel untuk memberikan jarak [...]
cauza

Apr 7th

mantap bro tutorialnya. Mau tanya boleh ?
ane punya dua div id didalam sebuah div id. Kedua div sudah di idi dan di beri propertis height auto. Gimana caranya supaya div id yang diluar (yang menaungi dua div id itu) tingginya mengikuti div id terpanjang didalamnya ?
Cheyuz

Apr 21st

@cauza: supaya mengikuti tinggi div ‘parent’, dengan cara heightnya kasih nilai 100%
Pedox

Jun 24th

wow selama ini gw ngira relative sama absolute sama. tapi beda
Cheyuz

Jun 24th

@pedox: iya emang beda gan, sesuai namanya, klo absolute ya absolute trhadap nilai px, klo relative ya tergantung div yg lain.. hehe
Yusuf

Aug 20th

gan, saya bikin login box
di bawah header tuh posisinya, saya udah atur atur posisinya menggunakan margin d CSS, eh pas di Maximized brubah tampilannya. jadi nimpah.
gimana caranya biar dinamis gan? Thx
saefulloh r

Sep 6th

maaf mau tanya juga. kalo boleh tapi..
gini aku pengin buat object/menu yang letaknya dibawah.yang nyesuaiin layar letake dibawah terus. kaya link di halaman google yang ada dibawah. si gimana ?
terima kasih…:-)
INFO TEKNO

Oct 15th

Manstab Gan!
Semoga brmanfaat bagi nusa dan bangsa
Cheyuz

Oct 31st

gan, saya bikin login box
di bawah header tuh posisinya, saya udah atur atur posisinya menggunakan margin d CSS, eh pas di Maximized brubah tampilannya. jadi nimpah.
gimana caranya biar dinamis gan? Thx

@yusuf: itu karena agan ga ngeset position: relative di containernya (tempat elemen yg dikasih absolute)
Cheyuz

Oct 31st

maaf mau tanya juga. kalo boleh tapi..
gini aku pengin buat object/menu yang letaknya dibawah.yang nyesuaiin layar letake dibawah terus. kaya link di halaman google yang ada dibawah. si gimana ?
terima kasih…:-)

@saefulloh: bikin elemen pake position absolute: trus dikasih property bottom: 0
Nightmare Syndrom

Nov 27th

Saya mau minta bantuannya pak cheyuz, saya udah bikin elemen fixed di blog baru saya http://nightmare-syndrom.blogspot.com/ .. memang berhasil. tapi waktu halamannya discroll kebawah ketemu sama horizontal menu saya kok si elemen fixed-nya tertutup oleh horizontal menu saya. mohon pencerahannya pak.
Nightmare Syndrom

Nov 29th

Gak jadi tanya pak., blognya udah jadi. masalahnya ada pada z-index.,,

Harian Cheyuz