Beranda
CSS

Mengenal Position dalam CSS

Properti position pada CSS memberikan banyak fleksibilitas dalam mengatur tata letak elemen di halaman web. Dengan memahami setiap nilai pada position
Analis Winter
Mengenal Position dalam CSS

Pada CSS, properti position adalah salah satu alat penting untuk mengatur tata letak elemen di dalam halaman web. Properti ini memungkinkan kita untuk mengontrol posisi suatu elemen dengan lebih fleksibel. Artikel ini akan membahas setiap nilai position yang tersedia dalam CSS dan cara menggunakannya.

Mengenal Position dalam CSS: Cara Mengatur Posisi Elemen dengan Tepat

Apa Itu Position pada CSS?

Secara umum, position adalah properti CSS yang digunakan untuk menentukan bagaimana elemen akan ditempatkan di halaman web. Nilai-nilai yang dapat digunakan dengan properti ini memiliki efek yang berbeda pada elemen, sehingga memberikan kontrol yang beragam dalam mendesain layout.

Berikut ini adalah nilai-nilai yang dapat digunakan dalam properti position:

Nilai Deskripsi
staticNilai default. Elemen akan ditempatkan dalam aliran dokumen normal tanpa pengaruh posisi khusus.
relativeMenggeser elemen dari posisi defaultnya sesuai dengan nilai top, right, bottom, atau left.
absoluteMenghapus elemen dari aliran dokumen dan menempatkannya relatif terhadap elemen induk terdekat yang diposisikan.
fixedMenghapus elemen dari aliran dokumen dan menempatkannya relatif terhadap jendela browser, sehingga tetap di tempat saat di-scroll.
stickyMenggabungkan fitur relative dan fixed; elemen akan bergerak mengikuti scroll dan berhenti pada posisi tertentu.

1. Position: Static

static adalah nilai default untuk setiap elemen. Artinya, elemen akan mengikuti urutan aliran dokumen tanpa pengaruh dari properti top, right, bottom, atau left. Contohnya:

.element {
  position: static;
}

Penggunaan nilai static biasanya tidak memerlukan pengaturan tambahan, karena elemen sudah mengikuti urutan normal halaman.

2. Position: Relative

Dengan position: relative, elemen akan tetap mengikuti aliran dokumen namun dapat digeser dari posisi aslinya dengan nilai top, right, bottom, atau left. Ini bisa digunakan untuk penyesuaian kecil.

.element {
  position: relative;
  top: 10px;
  left: 5px;
}

3. Position: Absolute

position: absolute menghapus elemen dari aliran dokumen dan menempatkannya relatif terhadap elemen induk terdekat yang diposisikan. Jika tidak ada induk terdekat yang diposisikan, elemen tersebut akan diposisikan relatif terhadap <html> atau <body>.

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 20px;
  left: 30px;
}

Pada contoh ini, .element akan diposisikan relatif terhadap .container.

4. Position: Fixed

Dengan position: fixed, elemen akan diposisikan relatif terhadap jendela browser, sehingga elemen akan tetap di tempat meskipun halaman di-scroll. Contoh yang sering digunakan adalah menempatkan menu tetap di bagian atas atau bawah halaman.

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

5. Position: Sticky

position: sticky menggabungkan konsep relative dan fixed. Elemen akan berperilaku sebagai elemen relatif hingga titik tertentu saat halaman di-scroll, dan setelahnya akan berperilaku seperti elemen tetap (fixed).

.section-header {
  position: sticky;
  top: 0;
}

Perbandingan Position dalam CSS

Position Mengikuti Aliran Dokumen Bisa Diatur dengan top, right, bottom, left Posisinya Terkait dengan
staticYaTidakAliran dokumen
relativeYaYaPosisi asli elemen
absoluteTidakYaElemen induk terdekat
fixedTidakYaJendela browser
stickyYa/TidakYaAliran dokumen/jendela

Berikut adalah contoh HTML lengkap yang menunjukkan penggunaan setiap nilai position dalam CSS. Setiap contoh ini bisa dicoba langsung di editor HTML kalian untuk melihat efeknya:

  1. <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Position CSS</title>
  <style>
/* ... (CSS seperti sebelumnya) ... */
  </style>
</head>
<body>
/* ... (konten HTML seperti sebelumnya) ... */
</body>
</html>
DEMO

Kesimpulan

Properti position pada CSS memberikan banyak fleksibilitas dalam mengatur tata letak elemen di halaman web. Dengan memahami setiap nilai pada position, kalian bisa mengatur elemen sesuai kebutuhan, baik itu membuat elemen tetap di layar atau menempatkannya sesuai dengan desain yang diinginkan.

Posting Komentar