Pelajari cara menggunakan properti CSS position untuk mengatur penempatan elemen di halaman.

CSS Position

Properti position digunakan untuk menentukan bagaimana sebuah elemen diposisikan dalam dokumen.

Nilai-nilai umum:

static (default)
relative
absolute
fixed
sticky

1. `position: static`

Ini adalah nilai default. Elemen diposisikan sesuai alur normal dokumen.

<style>
  .static-box {
    position: static;
    background-color: lightgray;
    padding: 10px;
  }
</style>
 
<div class="static-box">Elemen Static</div>

2. `position: relative`

Diposisikan relatif terhadap posisi normalnya.

<style>
  .relative-box {
    position: relative;
    left: 20px;
    top: 10px;
    background-color: lightblue;
    padding: 10px;
  }
</style>
 
<div class="relative-box">Elemen Relative</div>

3. `position: absolute`

Diposisikan relatif terhadap elemen induk terdekat yang memiliki position selain static.

<style>
  .container {
    position: relative;
    height: 150px;
    background-color: #eee;
  }
 
  .absolute-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: lightcoral;
    padding: 10px;
  }
</style>
 
<div class="container">
  <div class="absolute-box">Elemen Absolute</div>
</div>

4. `position: fixed`

Diposisikan relatif terhadap jendela browser. Tidak bergeser saat halaman di-scroll. untuk preview perhatikan dibawah sebelah kanan.

<style>
  .fixed-box {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: lightgreen;
    padding: 10px;
  }
</style>
 
<div class="fixed-box">Elemen Fixed</div>

5. `position: sticky`

Menempel di posisi tertentu saat di-scroll.

<style>
  .sticky-box {
    position: sticky;
    top: 0;
    background-color: orange;
    padding: 10px;
  }
</style>
 
<div class="sticky-box">Elemen Sticky</div>

Dengan memahami properti position, Anda dapat mengatur layout elemen dengan lebih fleksibel dan dinamis.

CSS Position

CSS Position

1. position: static

2. position: relative

3. position: absolute

4. position: fixed

5. position: sticky

On this page

1. `position: static`

2. `position: relative`

3. `position: absolute`

4. `position: fixed`

5. `position: sticky`