css thumbnail
CSS Positioning Property and it's Values - Pada tutorial sebelumnya saya menjelaskan cara membuat Notifikasi Komentar ala Google Plus, namun banyak pertanyaan tentang mengalihkan posisi atau banyak posisi yang tidak diinginkan.

Untuk menentukan posisi objek terhadap objek lain, atau objek terhadap browser, perlu pemahaman tentang CSS Position. Oleh karena itu saya akan coba menjelaskan Apa itu CSS Position dan bagaimana cara kerja properti dari CSS Position ini.

Sebelum melangkah kepada pembahasan, sebaiknya kita mengenal dulu istilah-istilah yang berhubungan dengan CSS. Beberap istilah yang harus diketahui adalah selector (selektor) , property (properti) , value (nilai) dan deklarasi. Untuk memahaminya, perhatikan CSS ini :

.box{position:relative}

.box adalah Selector (bagian atau elemen yang ingin kita atur stylenya)
position adalah Property (komponen yang kita butuhkan)
relative adalah Value/Nilai dari Property
Deklarasi adalah bagian yang ada di dalam {} yaitu properti dan nilai.

Value atau Nilai dari CSS position adalah :
1. static ditulis position:static
2. relative ditulis position:relative
3. absolute ditulis position:absolute
4. fixed ditulis position:fixed
5. inherit ditulis position:inherit

position:static

Posisi ini merupakan posisi default suatu elemen (statis). Tataletaknya seperti div biasa. Pada posisi ini top, right, bottom dan left tidak akan berpengaruh, contoh :


Pada contoh di atas, saya menerapkan properti top dan left pada DIV2 dan DIV3 (klik pada CSS dan HTML pada demo untuk lebih memahmi kode), dan ini tidak berpengaruh sama sekali, karena membentuk pola vertikal (garis baru ke bawah). Pada kondisi ini apabila si hijau ingin berjejer dengan merah maka keduanya harus ditambahkan float:left

Untuk ujicoba silahkan klik 'Edit in JSFiddle'. Anda tidak harus mendaftar di JSFiddle, cukup edit kode dan klik RUN untuk melihat hasilnya.

position:relative

Posisi inilah yang sering digunakan, pada posisi ini kita bisa memanfaatkan properti top dan left. Objek akan berubah posisi terhadap elemen utama, dan juga relativ terhadap dirinya.


Berbeda dengan position:static, dengan menerapkan position:relative kita bisa merubah posisi elemen seperti yang kita inginkan

position:absolute

Dengan menerapkan position:absolute, maka objek akan mengikuti parent (induk elemen) dengan catatan induk elemen harus menggunakan position:relative


Posisi si merah tidak akan lari kemana-mana karena background (si hitam) menggunakan position:relative. Intinya position:relative merupakan pagar dari anak yang diberi position:absolute supaya ga kabur.

Position Absolute terhadap Layar

Apabila si hitam tanpa position:relative maka si merah akan menyesuaikan dengan layar. Untuk lebih jelasnya, lihat contoh DISINI

position:fixed

Posisi ini hampir sama dengan position:absolute, akan tetapi perbedaannya position:fixed akan selalu pada posisinya walaupun browser di scroll. Contohnya saya gabung dengan position:absolute terhadap layar (contoh atas).

position:inherit

Posisi ini akan mengikuti posisi pada elemen iduk. Apabila elemen induk mempunyai position:absolute maka elemen didalamnya apabila diberi properti position dengan value inherit, maka hasilnya menjadi position:absolute (mengikuti elemen induk).

Semoga bermanfaat...

151 komentar

Wah harus di simak bener2 nih

Balas

ijin koment dulu baru baca,wakaw
mumpung masih sepi =D

Balas

wah, info yang bermanfaat
saya baru mengerti kode begini

Balas

Masih belum mudeng juga nih masalah CSS ... :bd

Balas

owh gitu ya kang.. bnyak jga ya.. makasih kang :)

Balas

Maaf kang OOT kenapa ya,widget recent comment diblog saya tiba-tiba menghilang...pada kemarin masih ada..
TKP: http://se0bloging.blogspot.com
Mohon pencerahan

Balas

emang asalnya dimana widgetnya? saya kan ga tau :D
kemungkinan script ga jalan

Balas

betul.. tidak bisa selintas.. harus bener difahami

Balas

gampang2 susah ko.. tapi kalau mau editing template wajib faham :D

Balas

aku menemukan seseatu yang aneh, jika mau reply ada tombol batal disamping pratinjau. Gimana caranya kk ?

Balas
Komentar ini telah dihapus oleh pengarang.

Perlu dibaca berulang-ulang nih kang .. maklum ari tos kolot mah rada belet hehe .. pokonya mantapzzz

Balas

Screenshot: http://i.imgur.com/quibn32.png kgk ada kan,,gimana tuu baru hari ini hilang,,,saya pke kode <style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Arif Rachman Hakim';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

sorry banyak tanya...

Balas

ambeken eta teh kang can di suguhan kopi .. jadi lengit weh haha

Balas

Mumpung libur dipelajari hela kang... moal waka tataros ah.. bilih rarepot kang Ismet na ke teu kaburu ngadamel liwet :)

Balas

hanya penambahan html pada comment editor ko

Balas

pabeulit sareng hutang lotek nya kang :D

Balas

wkwkkw.. bade kauleman kang

Balas

muhun nyaeta lah di tagih wae nyi icih heuheu

Balas

muhun karuhun na ulin jadi weh ulin karuhun haha

Balas

kemungkinan bentrok sama AdBlock.. coba lepas dulu adblocknya

Balas

acan karedok ka ma emeh nya wkwkwwk

Balas

Kagak pertamax gpp lah, nyang penting pekiwan aja :D
Ijin nyimak dulu kang Ismet.

Balas

jadi inget dikantin sma kang .. namana ma emeh heuheu

Balas

bayar tah nu darmaji :D :D

Balas

ijin sebentar kang, praktek satu-satu dulu biar paham..hehehehe

Balas

saya pernah menemui pembahasan mengenai ini di blognya DTE :]... tapi belum terlalu mengerti.. insyaAllah, mudah-mudahan saya bisa memahaminya di sini.. makasih ya kang...

Balas

pernah denger sih..
tapi sampai sekarang masih pusing.. hadehh
tapi thanks atas ilmunya ya kang!

Balas

Jadi bertambah ilmu seputar CSS nya, btw kang penggunaan z-index:9999 pada CSS Property fungsi buat apa kang ? :)

Balas

Wahh ini yang saya cari Kang, Nuhun artos Ngapost na Kang :D

Balas

Ijin Komen Kang, Entar Baru Baja ...:)

Balas

itu sih mengutamakan posisi (menimpal) widget lain agar tidak terhalangi :) alias widget tersebut didepankan posisinya mas.

Balas

ada ya? saya belum pernah baca soalnya :)

Balas

sama2 sob... santai aja lah memahaminya

Balas

sebetulnya bukan pada property position aja, z-index itu penumpukan, semakin besar nilai, maka semakin di atas. kalau dalam Photoshop seperti layer. contoh gambar lonceng pada blog ini, kalau z-index nya lebih kecil dari bar berwarna putih, maka akan ngumpet ketutup bar.

Balas

benuuul.. pinter si mba satu ini :-d

Balas

Oh iya kang, untuk beli domain di idwebhost bisa via pulsa gk kang ?

Balas

ini nih yang harus dipahami, soalnya kadang kadang kalo salah berantakan kang :D

Balas

betul sis, saya juga harus baca berulang - ulang sampai paham betul hehe

Balas

tajuknya CSS position rasanya.. lama udah artikelnya kang..

Balas

ok kang, terima kasih penjelasan super nya. :D
harus lakukan eksperimen dulu biar ngerti banget :D

Balas

wkwkw hebat kang, kotak komentarna aya tombol cancel. :-d

Balas

kamana wae atuh nembe nyadar :D

Balas

Kang, gambarnya kasih warna ya kalau ada update Artikel, biar recent post di blog saya tidak kelihatan hitam putih gitu hehehehe :-bd

http://1.bp.blogspot.com/-MBYJxsUX0LM/UoiF0a4wH_I/AAAAAAAANRg/EuhiCzoVpwo/s1600/recent.post.png

Balas

kang abi mah hoyong belajar JS... gaduh postingana?

Balas

Kalau masalah CCS mah saya nyerah aja...puisng juga...apa saya malas kalau belajar koding dan CSS jadi pakai alasan ini Kang Ismet heheh....peace

Balas

meskipun ga faham kalo trus mencoba dan mencoba mah nanti juga bisa... Kita bisa karena terbiasa... so jangan dulu nyerah...

Balas

hah via pulsa ?? kalau gitu mah kang ismet yg beli domain .. dan kang ismet juga beli pulsa ...

Balas

encore incomplète, mais il est très important pour un débutant, tous les éléments que nous devons comprendre.

Balas

hehehe.. siap.. ternyata dipajang ya :-bd

Balas

teuacan aya kang abi ge belajar keneh

Balas

benul kata kang wahyu.. ala bisa karena biasa

Balas

Lagi mau niat mendalami nih Kang .... Do'ain ya moga bisa ... :D Otodidak sih ... :(

Balas

je n'ai volontairement fait simple, donc plus compréhensible pour les débutants

Balas

Il s'avère que je pouvais comprendre la langue française. Bien qu'un peu mal.

Balas

Selalu dengan penjelasan yang mudah dipahami. Nice work kang :D

Balas

teng hese behesene eng te keherte ey ...

Balas

Tambah ilmu lagi nih kang :D

Balas

Mau tanya kang, gimana cara bikin tutorial kyak diatas???

Balas

Nyimak dulu Kang, setelah di pahami dengan
trik ini baru saya praktekan, terima kasih Kang Ismet

Balas

Haduuhh telat deui kang...panyakit kompi na ngajalar kamana-mana heheehe tos waktosna jajan panginten. ieu maksakeun nganggo cadangan...
Muhun kang...ieu nu kedah dipahami blogger nu resep ngedit template.... Dijelaskeun ku bahasa Indonesia janten langkung paham kang hehehe... hatur nuhun ah...

Balas

tengkyu sob.. semain mudah difahami, biasanya semakin mengundang orang untuk datang

Balas

sama ajakaya yang lain ko.. untuk demo saya pake JsFiddle

Balas

silahkan kang.. santai we lah nyimakna :D

Balas

sakitu teh kompi ajaib.. kumaha pami teu ajaib nya hehehe :D
postingan ieu teh gara2 seueur nu naros dina postingan sebelumnya kang..

Balas

Hehehehe... ari tos hoyong jajan mah teu ajaib deui kang... lieur...baong yeuh kompi na :D

Balas

ke abdi sewa domain ah.. kompibaong.com :D

Balas

kang bagaimana caranya agar setiap sudut posisi (footer, sidebar, dll) itu tidak lancip.
seperti tampilan template blog akang ini :)

Balas

gunakan border-radius:5px sesuaikan besar sudut tumpulnya

Balas

caranya ?
maklum kang, ane masih newbie tentang template & script

Balas

masukan kode tadi pada CSS yang akan dibuat tumpul, misalkan area postingan, cari kode .post maka tambahkan kode tadi, menjadi : (titik2 hanya contoh kode sebelumnya)

.post{
.....
.....
border-radius:5px

Balas

Ok, terima kasih kang (y) :)

Balas
Komentar ini telah dihapus oleh pengarang.

kang ismet , numpang tanya , cara mengatasi foto yang berubah menjadi tanya seru di blog ???

terima kasih

Balas

wah mantab kang, makasih banyak udah berbagi ilmu :D [ saya baru tau kegunaanya, kalo relative atau fixed ane udah tau kok @@,
- saya ketinggalan lagi, jauh :D

Balas

itu biasanya karena gambar dihapus.. untuk solusi otomatis saya belum tau, tapi intinya harus ganti gambar aja

Balas

lari aja buat ngejar, atau naik ojek :D

Balas

yap , terima kasih kang infonya :)

Balas

cara mengubah ukuran judul blog sekali warnanya bagaimana ya kang ismet , ada saran tidak :)

Balas

kang ismet bikin tutorial slide show dong (ototmatis atau tidak)
yang pergerakkannya lembut dan hanya di homepage saja request doang sih sebenernya gak ditanggap juga gakpapa

Balas

kang mau tanya kan position fixed ikut indux posisi nya tapi yang aneh tiap saya kasih position fixed selalu kekiri padahal kan indux nya kan dikanan kali kang ismet pernah ngalamin, saya nerapin css position di sidebar

Balas

Kateranganna meuni jelas, detil sareng simpel sakali maca oge tos kahartos, hatur nuhun kang ismet parantos keresa ngajelaskeun sagamblang-gamblangna.
Diantos rurumpaheun nana ka bumi pribados nu alit sareng awon, diantos nya kang...!

Balas

sore kang ismet, assalamualaikum.wr.wb... penjelasan postingannya padat dan jelas. sangat bermanfaat. artikel2 yg lain jg menarik2... salam kenal dari makassar

Balas

leres tah kang ajat, kantun mahamina yeuh nu kedah leres2,,,,,

Balas

Udah banyak koyang share... :)

Balas

kalau fixed itu ga ikut elemen induk kang, yang ikut itu absolute

Balas

wah sok kitu si akang mah.. percanten lah :-d

Balas

wa'alaikumsalam.. salam kenal juga mas taufik

Balas

nah salah deh :-D
kieu kang komposisi na
div right-sidebar
div sidebar
nah saya pasang na didlm sini tp posisi nya dikiri g mw kekanan
kali kang ismet pernah ngalamin hehe

Balas

baru kali ini ane kesulitan mempelajari trik dari kang Ismet :D

Balas

bukan trik sih.. apa ya istilahnya.. pengetahuan kali.. heheh

Balas

can kahartos posisina kang.. coba kasih absolute

Balas

Mkasih kanang atas informasinya.. saya butuh banget di blog ini http://estechno.blogspot.com/

Balas

terima kasih gan pencerahan pada artikel kali ini :D

Balas

Maaf OOT~ jawab pertanyaanku dong diforum kang ismet....
TKP: http://goo.gl/UUQBQy

Balas

wah belum ada yang baru nih kang .. kalau gitu mah ngopi we ula ah

Balas

Kang, cara membuat komentar lebih tua dan lebih baru gimana? ajarin dong :)

Balas

ikut membantu menjawab, komentar lebih tua dan lebih baru itu sudah ada pada sistem komentar.
Syaratnya komentar melebihi dari 200 komentar. :D

Balas

betul.. kalau dibawah 200 berarti masih muda :D

Balas
Komentar ini telah dihapus oleh pengarang.

Kang ismet sy mau nanya nih.. gimana caranya membuat search google nama blog kita sendiri muncul seperti gambar di bawah ini :

<img src="https://lh4.googleusercontent.com/-tdyU2d0JG-s/UoyV-TPEeNI/AAAAAAAAAek/nvD-H6teoM4/s400-no/vickry+share+google.jpg">

Balas

masih belajar ttg css,, nyimak kang tambah ilmu lagi..

Balas

kalau itu sih hadiah gugle :)

Balas

mantap penjelasannya dan mudah dimengerti

Balas

alhmd fix kang :d nuhun ternyata harus pake elemen div lagi baru absolut :d jadi g kabur eheheehe

Balas

Wahhh... :'( ga ada toolnya yah mass ?

Balas

Mau tanya, kok tombol publikasikan saya tidak berfungsi?

Balas

ini kang halamannya..

http://kemalseo.blogspot.com

Balas

blog geus hade, ngabahas script geus jauh...eh nu kieu patut di bahas keneh!!!
meunding keneh urang syntaxhighlighter :D

Balas

hahahhaha.... :D
pusing atuh naranya wae da :)

Balas

boro mah abi teh moal komentar pek teh ngolebat koneng .. bae ketang kang meh rada parinter .. !! pahala kang

Balas

wkwkwk.. gara2 dikomplen syntax na blogna tah kang beben wkwkkw :D

Balas

biasanya bugs dari blogger sob, nanti juga normal lagi

Balas

emang sampai sekarang belum? coba di hapus chace browsernya

Balas

oh sudah kang, ternyata di widget sharenya kegedean

Balas

mbeh rada hade posisi emot!!!
.comment_body p img {margin:0;padding:0;vertical-align:middle}
asa k luhur!!!

Balas

siap.. siap.. teu ka kemot kang, tos ditambah class :-bd

Balas

kalakah dibejaan hanjakal euy! jd hade batur!

Balas

wkwkwk sok kitu.. amal eta teh kang :D

Balas

teuing nya si akang eta mah .. ongkohan ngabejaan tapi gending hanjakal .. teu apaleun amal hahahaha

Balas

harus banyak belajar, agak membingungkan sedikit

Balas

Kang gimana nih caranya agar info di homepage saya ada di bawah judul post ?

Balas

Kalau php pakai apa kang???
mksud saya, kalau .js css html kan demoinnya bisa pakai jsfiddle.net...
kalau php gmana kang???

Balas

masih sedikit agak binggung tapi harus benar di pahami nich tutor thanks mas.

Balas

walah CCS teu ngartiii euyy ,,, ngartina angot"n tea :D
Kadang ngarti saetik , kadang lewih teu ngarti hahahaha
kudu belajar trus :D

Balas

Kang Cara Buat Kotak Banner yang Keren kodenya apa :D

Balas

kang ismet pengen tanya kok kang ismet pinter bangetya ngotak atik kode, sya malah kaga ngerti sama kode beginian , bikin pusing ihihii :D

bisa ajarin gak hehee :D
mampir kang http://blogzphere.blogspot.com

Balas

udah paham sedikit sedikt :D

Balas

pusing sendri nyoba ni tutorial :(

Balas

Kang... cara nya agar postingan tidak menutupi topwrapper saat di scroll ke bawah gmn??

Balas

Kang Ismet - hapus komentar ini -
( Tolong Follow blog saya please, ) OK
http://blanter-forever.blogspot.com

Balas

wah.. akhirnya paham juga arti dari semua position itu, kebetulan lagi belajar untuk buat web yang responsive dan akhirnya ketemu artikel ini. Makasih kang ismet..

Balas

sama2 sob... wah mantap dong bikin web :-bd

Balas

terlihat sederhana tapi mumet juga,,
wong cilacap arep ngapak ya kang,, ra ngapak ra kepenak,, heheee
ilate enyong kaku

Balas

Wah info yang bermanfaat gan, thanks

kami membuatkan mebel jati bertaraf internasional dengan kualitas tiada dua kami memberikan pelayanan dengan personal karena kepuasan anda adalah cita cita kami

mebel jati yang kami buat dari kayu perhutani dengan kualitas terbaik dan tidak menggunakan kualitas yang biasa. kami hanya mepercayakan pembuatan mebel jati kami hanya kepada karyawan profesional kami ..

ingat kami mempunyai moto
kamilah yang terbaik

www.susangallery.co.id

mebel jati
tempat tidur jati
kursi tamu jati
sofa jati
mebel jati murah
furniture jati
jati ukir
kursi tamu jati
kursi teras jati
sofa jati
bangku telephone jati
buffet TV jati
lemari pajang jati
tempat tidur jati
lemari pakaian jati
meja rias jati
meja kantor jati
kitchen set jati

Balas

Poskan Komentar


×
Chat