Posisi Tetap position: fixed

CSS (Cascading Style Sheets) digunakan untuk mengatur tata letak dan tampilan elemen HTML. Salah satu properti yang berguna adalah position, khususnya position: fixed, yang memungkinkan elemen tetap berada di posisi yang ditetapkan relatif terhadap tata letak halaman. Di bawah ini adalah langkah-langkah untuk menggunakan position: fixed:

Pemahaman Dasar

Pastikan Anda memahami konsep dasar position di CSS:

  • static: Nilai default, elemen mengikuti alur dokumen.
  • relative: Elemen diatur relatif terhadap posisi awalnya.
  • absolute: Elemen diatur relatif terhadap elemen induk yang memiliki posisi terdeklarasi (bukan static).
  • fixed: Elemen diatur relatif terhadap jendela browser.

Menetapkan Posisi Tetap

Tambahkan properti position: fixed; pada elemen yang ingin Anda tetapkan posisinya. Misalnya, jika Anda ingin header tetap di bagian atas halaman:

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

Penyesuaian Posisi

Anda dapat menyesuaikan posisi elemen yang memiliki position: fixed dengan properti seperti top, right, bottom, atau left. Contoh untuk memposisikan elemen di sudut kanan bawah:

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

Penyesuaian Tampilan

Sesuaikan tampilan elemen yang memiliki position: fixed dengan properti lain seperti background, color, padding, dan lain-lain sesuai kebutuhan desain Anda.

.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #f44336;
  color: #fff;
  padding: 10px;
}

Dengan mengikuti langkah-langkah di atas, Anda dapat menggunakan position: fixed untuk menjadikan elemen tetap di lokasi tertentu pada halaman web Anda. Sesuaikan sesuai dengan kebutuhan desain dan fungsionalitas Anda.

PREVIOUS
NEXT