Cara Memposisikan Website Menjadi Absolute (Positioning CSS)

A.    Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Baca Juga : Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS)

Fungsi CSS
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara Kerja CSS
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

B. Cara Memposisikan Website Menjadi Absolute (Positioning CSS)
Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen dan dibatasi oleh parent yang memiliki positioning relative. Sulit memahami apa yang saya tulis diatas, kita langsung ke contoh kasus.Silahkan temen-temen buat file baru dan beri nama absolute.html lalu ketikkan kode berikut:

Berikut hasil kode diatas:

#box2 secara aturan ditampilkan berada di dalam div #box, anda dapat terlepas dari aturan tersebut dengan menambahkan positioning absolute. Sekarang tambahakan position:absolute dan tentukan property bottom dan right.

#box2{
width:50px;
height:50px;
background:yellow;
position:absolute;
bottom:0; right:0;
}

Baca Juga : Pseudo-Class: Cara Memberikan Efek Ketika Cursor Berada Diatas Suatu Elemen (hover)

Hasil dari kode diatas sebagai berikut:

#box2 akan terlepas dari aturan penempatan elemen (keluar dari #box) dan berada di kanan bawah browser. Untuk membatasi pergerakan dari #box2 yang memiliki positioning absolute, maka kita harus menambahkan positioning relative pada parentnya yakni #box.

#box{
width:300px;
height:300px;
background:blue;
position:relative;
}

Hasil dari kode diatas sebagai berikut:

Sekarang #box2 berada di kanan bawah parentnya #box. Andapun dapat bermain dengan nilai negative untuk mendapat efek tertentu.

#box2{
width:50px;
height:50px;
background:yellow;
position:absolute;
bottom:-25px;
right:20px;
}

Hasil dari kode diatas adalah:

Note:Sulit memahami Relative-Absolute? Bayangkan “Relative” sebagai sangkar bagi “Absolute”, oleh karena itu pergerakan “Absolute” dibatasi oleh “Relative”.

Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memposisikan Website Menjadi Absolute (Positioning CSS)? Mungkin itu saja tulisan yang membahas tentang Cara Memposisikan Website Menjadi Absolute (Positioning CSS), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

Share :