DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

POSITION CSS - MENGATUR POSISI ELEMEN DENGAN DETAIL

Panduan lengkap untuk mengerti bagaimana position pada CSS bekerja. Ada static, relative, absolute, fixed dan sticky.

Position CSS - Mengatur posisi elemen dengan detail

Daftar Isi:

Apa itu position pada CSS ?
Kenapa penting mengerti positi...
Tabel nilai properti position ...
Penjelasan properti position C...
Kesimpulan

Salah satu ilmu penting yang cukup bikin pusing saat belajar CSS adalah position. Kamu akan melihat kelima nilai position ini, yaitu static, relative, absolute, fixed dan sticky beserta demo yang bisa kamu lihat dan uji langsung!

Apa itu position pada CSS ?

Position pada CSS adalah properti yang digunakan untuk mengatur posisi elemen HTML. Jangan tertukar antara “elemen” dan “layout”.

Kalau mengatur layout secara kesuluruhan bisa menggunakan flexbox atau grid. Kalau mengatur posisi elemen HTML secara detail, bisa menggunakan position.

Kenapa penting mengerti position ?

Kalau kamu ingin belajar membuat website dari nol, ikuti kelas membuat website dengan HTML dan CSS

Tabel nilai properti position position CSS

NilaiPenjelasan
StaticIni adalah nilai bawaan. Elemen ditempatkan sesuai dengan aliran normal dokumen.
RelativeElemen ditempatkan relatif terhadap posisinya sendiri, memungkinkan pengguna mengatur posisi dengan properti top, right, bottom, atau left.
AbsoluteElemen ditempatkan secara absolut relatif terhadap elemen pembungkus pertama non-static terdekat. Ini memungkinkan penciptaan layout yang lebih kompleks dan kontrol yang lebih besar atas posisi elemen.
FixedElemen ditempatkan relatif terhadap jendela viewport, sehingga tetap di posisi tertentu bahkan saat pengguna menggulir halaman.
StickyElemen “menempel” pada posisi tertentu selama pengguliran, berfungsi seperti kombinasi dari relative dan fixed.

Penjelasan properti position CSS

Kita akan menggali nilai posisi ini dengan contohnya masing-masing.

Position Static

Nilai static adalah nilai default yang berarti tanpa didefenisikan, semua elemen akan menggunakan nilai ini.

Position Relative

Nilai relative berarti elemen akan ditempatkan relatif terhadap posisinya sendiri.

Position Absolute

Nilai absolute berarti elemen akan ditempatkan secara absolut, namun relatif terhadap elemen pembungkus pertama non-static terdekat.

Position Fixed

Nilai fixed berarti elemen akan ditempatkan relatif terhadap jendela viewport, sehingga tetap di posisi tertentu bahkan saat pengguna menggulir halaman.

Position Sticky

Nilai sticky berarti elemen “menempel” pada posisi tertentu selama pengguliran, berfungsi seperti kombinasi dari relative dan fixed.

Kesimpulan

Itu dia teman-teman penjelasan mengenai position pada CSS. Semoga bermanfaat ya. Kalau ada pertanyaan, silahkan tulis di kolom komentar!

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Penulis: Hilman Ramadhan

/ @hilmanski

Hai saya Hilman, membuat situs Sekolah Koding (Skodev) dan menulis buku untuk programmer (Halo Koding), Halo Koding . Sudah mengetik-ngetik alias programming sejak 2015. Semoga artikel dan situs ini bisa bantu karir kamu ya!

Artikel lain di kategori "frontend"

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding