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:

NilaiDeskripsi
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;  /* Elemen digeser 10px ke bawah */
  left: 5px;  /* Elemen digeser 5px ke kanan */
}

3. Position: Absolute

position: absolute menghapus elemen dari aliran dokumen dan menempatkannya relatif terhadap elemen induk terdekat yang diposisikan (yaitu induk yang memiliki nilai position selain static). 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%;
}

Contoh di atas menunjukkan elemen .navbar yang selalu berada di bagian atas halaman dan tidak bergerak saat di-scroll.

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;
}

Pada contoh ini, .section-header akan menempel di bagian atas halaman saat melewati batas atas saat di-scroll.

Perbandingan Position dalam CSS

PositionMengikuti Aliran DokumenBisa Diatur dengan top, right, bottom, leftPosisinya 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:

<!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 dasar untuk styling */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }
    .box {
      padding: 20px;
      margin: 10px 0;
      color: white;
      font-weight: bold;
      text-align: center;
    }
    
    /* Position: Static */
    .static-box {
      background-color: #4CAF50;
      position: static; /* default, tidak perlu diatur sebenarnya */
    }

    /* Position: Relative */
    .relative-box {
      background-color: #FF9800;
      position: relative;
      top: 10px;  /* Menggeser 10px ke bawah dari posisi aslinya */
      left: 20px; /* Menggeser 20px ke kanan dari posisi aslinya */
    }

    /* Position: Absolute */
    .absolute-container {
      position: relative; /* diperlukan agar absolute-box berada relatif terhadap kontainer ini */
      height: 200px;
      background-color: #EEE;
    }
    .absolute-box {
      background-color: #2196F3;
      position: absolute;
      top: 50px; /* Mengatur posisi absolut dalam .absolute-container */
      left: 30px;
    }

    /* Position: Fixed */
    .fixed-box {
      background-color: #f44336;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 1; /* memastikan elemen tetap di atas elemen lainnya */
    }

    /* Position: Sticky */
    .sticky-box {
      background-color: #673AB7;
      position: sticky;
      top: 0;
      color: white;
      padding: 15px;
    }
  </style>
</head>
<body>

  <!-- Position: Fixed -->
  <div class="fixed-box">Position: Fixed - Tetap di tempat saat di-scroll</div>

  <div class="container">

    <!-- Position: Static -->
    <div class="box static-box">Position: Static (Default)</div>

    <!-- Position: Relative -->
    <div class="box relative-box">Position: Relative (Tergeser dari posisi aslinya)</div>

    <!-- Position: Absolute -->
    <div class="absolute-container">
      <div class="box absolute-box">Position: Absolute (Terkait .absolute-container)</div>
    </div>

    <!-- Position: Sticky -->
    <div class="sticky-box">Position: Sticky - Tetap menempel di atas saat di-scroll melewati batas</div>

    <!-- Konten panjang untuk demonstrasi efek scroll -->
    <div style="height: 1000px;">
      <p>Scroll ke bawah untuk melihat efek dari <code>position: fixed</code> dan <code>position: sticky</code>.</p>
      <p>Posisi fixed akan tetap berada di atas layar, sedangkan posisi sticky akan menempel di atas saat elemen mencapai posisi tertentu.</p>
    </div>

  </div>

</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.

Categorized in:

CSS,

Last Update: November 8, 2024