Tata letak menggunakan CSS

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;
}

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;
}

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;
}

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;
}

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…
Sumber : harian.cheyus.com