Skip to main content

B.4.2.7. Position

Kali ini, kita akan membahas salah satu properti yang juga sering digunakan dalam pengaturan layout, yaitu position. Properti ini memungkinkan kita untuk mengatur posisi elemen-elemen di halaman dengan lebih fleksibel, baik itu menempatkan elemen di tempat tertentu, di atas elemen lain, atau mengatur pergerakan elemen saat halaman di-scroll.

Ada beberapa nilai yang bisa kita gunakan untuk mengatur posisi elemen menggunakan properti position. Yuk kita bahas satu per satu:

B.4.2.7.1. static​

Nilai ini adalah nilai default dari semua elemen. Jika kita tidak mengatur position, maka elemen akan memiliki posisi static. Artinya, elemen akan diposisikan sesuai alur normal dokumen, mengikuti urutan HTML tanpa modifikasi posisi.

Coba temen-temen perhatikan kode di bawah ini.

<div class="element"></div>

Ketika temen-temen buka di web browser maka hasilnya akan terlihat seperti <div> yang di berikan style seperti yang telah di terapkan pada kode css di atas.

Output

B.4.2.7.2. relative​

Dengan position: relative;, temen-temen bisa memindahkan elemen dari posisi asalnya berdasarkan properti tambahan seperti top, right, bottom, atau left.

Contohnya pada kode sebelumnya, ketika temen-temen ingin menggeser <div> tadi sebanyak 100px ke kanan, maka temen-temen bisa tambahkan properti:

.element {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  position: relative;
  left: 100px;
}

Ketika temen-temen buka di web browser maka hasil dari penerapan style di atas akan terlihat seperti:

Output

Bisa temen-temen lihat, elemen <div> kita lakukan pergeseran sebanyak 100px dari kiri yang menyebabkan elemen tersebut bergeser ke kanan.

B.4.2.7.3. absolute​

Elemen dengan position: absolute; akan diposisikan relatif terhadap kontainer terdekat yang memiliki posisi selain static. Jika tidak ada kontainer yang diposisikan, maka elemen tersebut akan diposisikan relatif terhadap halaman (viewport). Properti top, right, bottom, dan left akan menentukan posisi elemen dari tepi kontainernya.

Contohnya temen-temen punya kode seperti ini:

<body>
  <div class="container">
    <div class="element"></div>
  </div>
</body>

Ketika temen-temen buka di web browser maka tampilannya akan terlihat seperti:

Output

Pada penjelasan kode di atas, kita terapkan style pada elemen <body> seperti border: 1px solid black;, padding:1rem; dan height: 90vh;. Sedangkan pada elemen <div class="container"> kita terapkan boder dengan warna coklat.

Lalu, kita juga punya sebuah elemen <div class="element"> dengan lebar dan tinggi 100px berwarna blueviolet. Setelahnya, apa jadinya ya ketika kita set position-nya ke absolute dan bottom:0px;

.element {
  /*.....*/
  position: absolute;
  bottom: 0px;
}

Ekspektasi nya adalah kotak berwarna blueviolet akan menempel ke bawah tetapi tidak akan melebihi garis berwarna coklat. Sekarang mari kita coba lihat hasilnya di web browser.

Output

Bisa temen-temen lihat, kotak tersebut malah menempel ke bawah dan melebihi garis coklat ataupun hitam. Hmmm kenapa ya kira-kira🤔?

Nah ini terjadi karena elemen dengan position:absolute; akan diposisikan relatif terhadap kontainer terdekat yang memiliki posisi selain static, sedangkan kedua kontainer yang membungkus kotak tersebut semuanya memiliki posisi static.

Jika kita ingin memposisikan kotak yang absolute relatif terhadap garis coklat atau .container, maka kita harus merubah posisi .container menjadi selain static .

.container {
  /*.....*/
  position: relative;
}

Output

Bisa temen-temen lihat, elemen kotak tadi sudah di posisikan relatif terhadap .container karena memiliki posisi selain static.

B.4.2.7.4. fixed​

Sebuah elemen dengan position: fixed; akan diposisikan relatif terhadap window (viewport), artinya elemen ini akan tetap berada di posisi yang sama meskipun halaman di-scroll. Ini sering digunakan untuk elemen seperti navigasi yang tetap di layar.

<nav class="navbar">
  <h1>Breaking</h1>
</nav>

<main class="content">
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio aliquam sint
    dignissimos reiciendis rerum cum incidunt molestias excepturi amet culpa?
  </p>
  <!-- 39...more -->
</main>

Untuk melihat hasilnya, temen-temen bisa buka di web browser dan uncomment salah satu properti position di atas dan bandingkan perbedannya.

B.4.2.7.5. sticky​

Nilai sticky adalah gabungan antara relative dan fixed. Elemen dengan position: sticky; akan berperilaku seperti elemen relative sampai titik tertentu (yang diatur dengan top, right, bottom, atau left), dan setelah itu elemen akan "menempel" di layar seperti fixed.

<nav class="navbar">
  <h1>Breaking</h1>
</nav>

<main class="content">
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio aliquam sint
    dignissimos reiciendis rerum cum incidunt molestias excepturi amet culpa?
  </p>
  <!-- 39...more -->
</main>

Elemen nav akan tetap berada dalam posisinya sampai teman-teman scroll melewati top: 0;, setelah itu nav akan "menempel" di bagian atas halaman.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.2-box-styling/B.4.2.7-position