Belajar CSS Part 6: Memahami Position Dalam CSS


Belajar CSS Part 6: Memahami Position Dalam CSS 1

IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-6 dalam sesi belajar CSS. Sebelumnya kita pernah membahas Format Text Dalam CSS. Pada pertemuan yang ke-6 saya akan mengulas Memahami Position Dalam CSS.

Pengenalan

Position di CSS digunakan untuk mengatur posisi element HTML. Misalkan, kita ingin menetapkan posisi sebuah element dengan element yang lain, maka dengan menggunakan properti position CSS kita dapat menentukan posisi element HTML sesuai dengan yang kita inginkan.

Ada beberapa properti CSS yang bisa digunakan untuk menentukan posisi element HTML yaitu:

  • static
  • relative
  • fixed

Pada umumnya untuk mengatur posisi element kita pasti menggunakan properti css lainnya seperti, mengatur top, bottom, left dan right.

Tetapi properti tersebut tidak akan bekerja kalau position belum diatur, karena properti lain tergantung dengan position yang sudah ditetapkan.

Static

Static position di gunakan untuk mengatur element menjadi statis …

… Secara default, element akan mengikuti posisi normal.

Contoh penulisan dan penggunaan position static sebagai berikut

index.html

style.css

position static css - #IRVANGEN
position static css – #IRVANGEN


Relative

Yang menggunakan Position Relative, sebuah HTML akan terletak pada posisi normal.

index.html

style.css

Position relative css- #IRVANGEN
Position relative css- #IRVANGEN


Fixed

Element HTML yang diatur dengan position fixed mempunyai sifat tetap, tanpa ada perubahan sedikitpun, bahkan jika halaman situs di scroll.

Berlaku juga untuk pengaturan top, bottom, left dan right pada postion fixed.

index.html

style.css

position fixed css - #IRVANGEN
position fixed css – #IRVANGEN


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Memahami Position CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Income Search:

  • belajar position css
  • mengatur letak gambar malaa ngiding
  • mengenal position di css
  • position relative css digunakan untuk
  • positioning css cara
  • cara belajar css part 8 malasngoding
  • belajar posisition css
  • belajar posisition
  • positioning dalam css
  • apa itu position pada css

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *