Belajar CSS Bagian 14: Mengenal Properti CSS Position

Dalam belajar CSS bagian 13, kita telah belajar tentang apa itu properti CSS Display beserta contoh implementasinya. Pada seri lanjutan belajar CSS bagian ke 14 ini, kita akan belajar mengenal apa itu properti CSS position beserta contoh dan penggunaannya.

Daftar Isi hide

1 Apa itu Properti CSS Position?

2 Nilai Dasar Properti CSS Position

2.1 1. Static

2.2 2. Relative

2.3 3. Absolute

2.4 4. Fixed

2.5 5. Sticky

3 Nilai Global Properti CSS Position

3.1 1. Inherit

3.2 2. Initial

3.3 3. Unset

4 Contoh Implementasi CSS Display

5 Kesimpulan

Apa itu Properti CSS Position?

CSS position adalah properti dalam CSS yang digunakan untuk mengatur penempatan elemen di halaman website. Properti ini memungkinkan agar elemen diposisikan relatif terhadap elemen lain, viewport, atau dokumen, sehingga tata letak menjadi lebih fleksibel.

Fungsinya, mencakup pembuatan navigasi tetap (sticky) serta elemen overlay seperti modal dan tooltip. Selain itu, properti position bekerja bersama dengan top, right, bottom, dan left untuk menentukan lokasi spesifik elemen. Nilai yang digunakan pada position akan memengaruhi bagaimana elemen berinteraksi dalam tata letak halaman.

Nilai Dasar Properti CSS Position

Berikut adalah beberapa nilai dasar yang sering digunakan pada properti CSS position:

1. Static

Nilai static untuk properti css position adalah nilai default. Elemen HTML akan ditempatkan sesuai posisi dokumen HTML secara normal tanpa ada properti tambahan seperti properti: top, left, right, bottom. Berikut contoh kode CSS:

.static {
  position: static;
}

2. Relative

Nilai relative untuk properti css position adalah nilai untuk memposisikan elemen HTML secara relatif terhadap posisi semula. Anda dapat menggeser posisi elemen HTML menggunakan properti tambahan seperti top, left, right, bottom. Berikut contoh kode CSS:

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

3. Absolute

Nilai absolute akan memposisikan elemen HTML secara relatif terhadap elemen induk (ancestor) terdekat yang memiliki position selain static. Berikut contoh kode css :

.absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

4. Fixed

Nilai fixed akan memposisikan elemen HTML secara relatif terhadap viewport (ukuran layar). Dan akan tetap berada di tempat yang sama meskipun pengunjung website menggulir atau melakukan scrolling halaman. Berikut contoh kode css :

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

5. Sticky

Nilai sticky merupakan kombinasi dari nilai relative dan fixed. Elemen HTML akan tetap dalam posisi relatif hingga mencapai batas tertentu, kemudian menjadi seperti elemen fixed. nilai sticky Sering digunakan untuk header atau navigasi yang “menempel” saat di-scroll. Berikut contoh kode CSS:

.sticky {
  position: sticky;
  top: 0;
  background-color: yellow;
}

Nilai Global Properti CSS Position

Selain nilai dasar, ada juga nilai global pada properti CSS position seperti:

1. Inherit

Nilai inherit akan Mengambil nilai properti position dari elemen induknya. Berikut contoh kode CSS:

.inherit  {
  position: inherit ;
}

2. Initial

Nilai initial akan mengembalikan nilai properti position ke nilai default (static). Berikut contoh kode CSS:

.initial {
  position: initial ;
}

3. Unset

Nilai unset akan menghapus nilai properti elemen. Bertindak seperti inherit jika properti diwariskan atau initial jika tidak. Berikut contoh kode CSS:

.unset {
  position: unset ;
}

Contoh Implementasi CSS Display

Berikut adalah contoh script CSS position yang telah diterapkan ke kode html.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Display</title>
    <style>
.container {
  height: 200px;
  padding: 10px;
}

.box {
  margin: 5px;
  padding: 10px;
  background-color: blue;
}

.static {
  position: static;
  background-color: fuchsia;
}

.relative {
  position: relative;
  top: 10px;
}

.absolute {
  position: absolute;
  top: 40px;
  left: 30px;
  background-color: red;
}

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: chartreuse;
}

.sticky {
  position: sticky;
  top: 0;
  background-color: yellow;
}
    
    </style>
</head>

<body>
    <div class="container">
        <div class="box static">Static</div>
        <div class="box relative">Relative</div>
        <div class="box absolute">Absolute</div>
        <div class="box fixed">Fixed</div>
        <div class="box sticky">Sticky</div>
    </div>
</body>
</html>

Kemudian jika di testing di browser untuk akan menampilkan screenshoot seperti berikut:

Kesimpulan

CSS position sangat penting untuk mengatur tata letak elemen pada halaman web. Dengan memahami berbagai nilai position, pengembang dapat menciptakan desain yang dinamis, fleksibel, dan sesuai kebutuhan, baik itu untuk tata letak sederhana maupun kompleks.

Demikian artikel belajar CSS bagian ke 14 tentang CSS position. Ikuti terus seri belajar CSS selanjutnya, untuk meningkatkan kemampuan CSS Anda. Semoga bermanfaat.