Apa itu Float, Clear, dan Position pada CSS? Kamu Harus Tahu
Cascading Style Sheets atau yang sering dikenal dengan singkatan
CSS adalah sebuah kerangka untuk menampilkan pesan yang biasanya dibungkus dalam suatu bidang yang disebut <style> yang membuat sebuah tampilan pada blog ataupun website
tersebut menjadi tertata rapi.
CSS itu sendiri sangat berguna sekali dalam
pengembangan sebuah tampilan blog atau website. Untuk lebih mudahnya, CSS
adalah <style>. Tentu kamu sangat familiar sekali dengan yang namanya
<style> ini. Dalam kerangka HTML, <style> biasanya berada dalam bidang <head> dan sebelum penutup </head>.
Kamu akan menemukan beberapa kata yang sangat banyak sekali pada bidang
<style> ini. Sebut saja float, clear, position, dan
rekan-rekannya. Berikut adalah pengertian,
penjelasan, dan kegunaan float, clear, dan position pada
sebuah kerangka <style>.
1.
Apa itu
Float?
Float berarti mengapung, mengambang, dan melayang. Dalam bidang <style>,
kegunaan Float ini adalah memberikan
perintah agar beberapa widget maupun div bisa berada di posisi yang telah ditentukan.
Dalam sebuah kelas terdapat bangku A dan bangku B,
Bangku A kita anggap saja sebagai <div> A,dan bangku B sebagai <div>
B. Float menentukan posisi kedua bangku tersebut harus berada dimana. Bangku
A di kiri, dan Bangku B di kanan. Jika di implementasikan dalam
bidang style, maka cara penulisannya
seperti dibawah ini
<style>
#bangku-a {
float:left;
}
#bangku-b{
float:right;
}
</style>
2.
Apa itu
Clear?
Clear atau clear:both adalah perintah agar sebuah widget
ataupun tampilan berada di posisi baru
dan tidak ada widget lain yang mengisi kekosongan kiri maupun kanan dari widget
yang menggunakan clear:both ini,yang
artinya jika widget A menggunakan clear, dan selanjutnya ada widget B, maka
Widget B akan otomatis berada dibawah widget A. Jika Bangku A dan bangku B
adalah float, maka clear:both adalah sebuah rak-buku belakang kursi.
Penulisan pada bidang <style> adalah seperti
berikut.
<style>
#rak-buku{
Clear:both;
}
</style>
3.
Apa itu
Position?
Position dalam bahasa
Indonesia berarti posisi atau ruang. dalam dunia <style>
position ini sangat beragam, seperti inherit, relatif, absolute, fixed, ataupun
sticky.
a.
Apa itu position:fixed
Kamu pernah
melihat sebuah header ataupun menubar sebuah website yang tetap berada diposisi
bahkan ketika discroll? Ini bernama position:fixed. Posisi yang tetap
berada ditempatnya dan tidak akan berpindah tempat bagaimanapun caranya.
b.
Apa itu position:sticky
Sama halnya
dengan position:fixed, namun position:sticky ini tidak selalu berada
di posisi yang tetap. Contohnya sebuah sidebar pada sebuah situs yang ketika discroll, widget tersebut akan tetap
berada di posisi, namun ketika mencapai di
<footer>, sidebar tersebut kembali lagi ke posisi semulanya dan tidak
menutupi bidang <footer>.
c.
Apa itu position:absolute
Perintah
sebuah position:absolute adalah
perintah untuk menjadikan sebuah posisi
berada di posisi yang tidak relative
atau tidak mengikuti widget ataupun bidang div sebelumnya atau sesudahnya yang
mengakibatkan widget itu sendiri
menjadi tidak rapi jika tidak
menggunakan padding maupun margin untuk memisahkan jarak.
d.
Apa itu position:relative
Berbeda dengan position:fixed, position:relative ini mengikuti
posisi, ukuran widget tersebut dan tidak
mengganggu widget lainnya. Position:relative biasa digunakan
untuk bidang post dan widget sidebar lainnya pada sebuah
tampilan.
KESIMPULAN
Kamu harus tahu apa itu float,
clear, dan position dalam bidang <style> agar kamu dapat
memperbaiki posisi widget seperti adsense menjadi position:sticky, atau membuat header
menjadi position:fixed yang
sederhana.
Berikut adalah kode lengkapnya. Silahkan copy kode berikut ini dan paste
pada w3school dan cobalah untuk
memeriksa bagaimana cara kerja float,clear, dan position dalam dunia <HTML>.
<style>
header{Position:fixed;left:0;top:0;background:blue;right:0;text-align:center;}
.widget-a{float:left;position:relative;width:200px;background:pink;margin-top:20px;margin-bottom:10px;}
.widget-b{float:right;position:relative;width:200px;background:pink;margin-top:20px;margin-bottom:10px;}
footer{clear:both;background:blue;width:100%;}
</style>
<header> SAYA FIXED</header>
<div class="widget-a"> SAYA FLOAT:LEFT</div>
<div class="widget-b">SAYA FLOAT:RIGHT</div>
<footer>SAYA CLEAR-BOTH</footer>
Itulah pengertian, penjelasan, kegunaan, dan kesimpulan
dari sebuah pertanyaan yang sering ditanyakan “ Apa itu Float, Clear, dan Position pada CSS “. Semoga bermanfaat
dan jangan lupa untuk klik tombol share, dan tinggalkan komentar pada kolom
komentar dibawah ini.
0 Response to "Apa itu Float, Clear, dan Position pada CSS? Kamu Harus Tahu"
Posting Komentar
Berkomentar lah secara bijak,sopan dan sesuai topik pembahasan...