Position di CSS: Cara Membuat dan Contohnya

Properti posisi pada CSS digunakan untuk menentukan jenis metode pemosisian yang digunakan untuk elemen (static, relative, fixed, absolute atau sticky).

Section Artikel

1 Properti Position
2 position: static;
3 position: relative;
4 position: fixed;
5 position: absolute;
6 position: sticky;
7 Element Overlapping
8 Posisi Teks pada Gambar
9 All CSS Positioning Properties

Properti Position

Properti position menentukan jenis metode pemosisian yang digunakan untuk suatu elemen.

Ada lima nilai posisi yang berbeda pada properti position yaitu :

static
relative
fixed
absolute
sticky

Elemen kemudian diposisikan menggunakan properti top, bottom, left, dan right. Namun properti top, bottom, left, dan right tidak akan berfungsi kecuali properti position diatur terlebih dahulu. Properti top, bottom, left, dan right juga memilki fungsi berbeda tergantung pada nilai posisi.

position: static;

Elemen pada kode HTML akan diposisikan static secara default.

Elemen yang diposisikan static (default) tidak terpengaruh oleh properti top, bottom, left, dan right

Sebuah elemen dengan properti position: static tidak diposisikan dengan cara apapun selalu diposisikan sesuai dengan alur normal halaman:

Berikut adalah contoh penggunaannya pada CSS.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>Elemen dengan position: static tidak diposisikan dengan cara apapun selalu diposisikan sesuai dengan alur normal halaman</p>

<div class="static">
 Elemen div ini memiliki setelan position: static;
</div>

</body>
</html>

position: relative;

Sebuah elemen dengan position: relative diposisikan secara relative terhadap posisi normalnya.

Menyetel properti top, bottom, left, dan right dari elemen yang posisinya relatif akan menyebabkannya posisi elemen menjauh dari posisi normalnya. Konten lain tidak akan menyesuikan dengan celah yang ditinggalkan oleh elemen.

Berikut contoh penggunaan position: relative pada CSS :

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>Sebuah elemen dengan position: relative diposisikan secara relatif terhadap posisi normalnya.</p>

<div class="relative">
Elemen div ini memiliki setelan position: relative;
</div>

</body>
</html>

position: fixed;

Sebuah elemen dengan position: fixed; diposisikan relati terhadap viewport, yang berarti elemen akan selalu di tempat yang sama meskipun halaman di-scroll. Properti properti top, bottom, left, dan right digunakan untuk memposisikan elemen.

Elemen fixed tidak meninggalkan celah pada halaman dimana tempat biasanya elemen tersebut ditempatkan.

Perhatikan elemen fixed di pojok kanan bawah halaman.

Berikut adalah contoh penggunannya pada CSS :

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>Sebuah elemen dengan position: fixed; diposisikan relatif terhadap viewport, yang berarti elemen akan selalu di tempat yang sama meskipun halaman di-scroll:</p>

<div class="fixed">
Elemen ini memiliki pengaturan position: fixed;
</div>

</body>
</html>

position: absolute;

Sebuah elemen dengan position: absolute diposisikan relatif terhadap posisi leluhur terdekat (bukan diposisikan relatif terhadap viewport, seperti fixed).

Namun apabila elemen yang diposisikan absolute tidak memiliki leluhur yang diposisikan, posisi absolut akan menggunakan badan dokumen, dan bergerak bersama dengan scroll bar pada halaman.

Catatan: Elemen “positioned” adalah semua jenis elemen yang diposisikan apapun kecuali statis.

Berikut ini contoh sederhananya:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>Sebuah elemen dengan position: absolute diposisikan relatif terhadap posisi leluhur terdekat (bukan diposisikan relatif terhadap viewport, seperti fixed):</p>

<div class="relative">Elemen div ini memeilki position: relative;
  <div class="absolute">Elemen div ini memeilki position: absolute;</div>
</div>

</body>
</html>

position: sticky;

elemen dengan position: sticky diposisikan berdasarkan posisi scroll bar pengguna.

Elemen sticky adalah peralihan antara posisi relative dan fixed, bergantung pada posisi scroll bar. Elemen sticky diposisikan relative hingga posisi offset tertentu terpenuhi pada viewport – lalu menempel (stick) pada tempatnya (seperti position: fixed).

Dalam contoh ini, elemen sticky menempel di bagian atas halaman (top: 0) saat telah mencapai posisi scroll bar.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> Konten dalam frame ini bertujuan untuk memahami cara kerja position:sticky.</p>
<p>Catatan: IE / Edge 15 dan versi sebelumnya tidak mendukung position:sticky.</p>

<div class="sticky">Aku sticky!</div>

<div style="padding-bottom:2000px">
  <p>Dalam contoh ini, elemen sticky menempel di bagian atas halaman (top: 0) saat telah mencapai posisi scroll bar.</p>
  <p>Scroll kembali ke atas untuk menghilangkan stickyness.</p>
  <p>Teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Catatan: Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung position: sticky. Lalu pada Safari membutuhkan -webkit- prefix. Penentuan position top, bottom, left, dan right juga harus dilakukan setidaknya satu posisi tersebut agar position: sticky berfungsi.

Element Overlapping

Saat elemen diposisikan, elemen-elemen tersebut bisa saja tumpang tindih (overlap) dengan elemen lain.

Properti z-index menentukan urutan tumpukan suatu elemen (elemen mana yang harus ditempatkan di depan, atau di belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>Ini heading</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRvjoTKQiymuk5AaI1mk5B3mr8EjyxnWHiN9Q&usqp=CAU" width="100" height="140">
<p>Karena gambar memiliki z-index -1, gambar akan ditempatkan di belakang teks.</p>

</body>
</html>

Elemen dengan urutan tumpukan lebih besar selalu berada di depan elemen dengan urutan tumpukan lebih rendah.

Catatan: Jika dua elemen yang diposisikan tumpang tindih tanpa z-index yang ditentukan, elemen yang diposisikan terakhir dalam kode HTMLnya akan ditampilkan di atas.

Posisi Teks pada Gambar

Berikut adalah contoh-contoh memposisikan teks pada sebuah gambar.

Cara memposisikan teks atas gambar (posisi top left) :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Teks pada Gambar</h2>
<p>Tambahkan beberapa teks ke gambar di pojok kiri atas:</p>

<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRvjoTKQiymuk5AaI1mk5B3mr8EjyxnWHiN9Q&usqp=CAU" alt="Cat" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

Cara memposisikan teks atas gambar (posisi top right) :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Teks pada Gambar</h2>
<p>Tambahkan beberapa teks ke gambar di pojok kanan atas:</p>

<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRvjoTKQiymuk5AaI1mk5B3mr8EjyxnWHiN9Q&usqp=CAU" alt="Cat" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

Cara memposisikan teks atas gambar (posisi bottom left) :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Teks pada Gambar</h2>
<p>Tambahkan beberapa teks ke gambar di pojok kiri bawah:</p>

<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRvjoTKQiymuk5AaI1mk5B3mr8EjyxnWHiN9Q&usqp=CAU" alt="Cat" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

Cara memposisikan teks atas gambar (posisi bottom right) :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Teks pada Gambar</h2>
<p>Tambahkan beberapa teks ke gambar di pojok kanan bawah:</p>

<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRvjoTKQiymuk5AaI1mk5B3mr8EjyxnWHiN9Q&usqp=CAU" alt="Cat" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Cara memposisikan teks atas gambar (posisi center) :

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Teks pada Gambar</h2>
<p>Teks posisi Center di dalam gambar:</p>

<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRvjoTKQiymuk5AaI1mk5B3mr8EjyxnWHiN9Q&usqp=CAU" alt="Cat" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

All CSS Positioning Properties

Properti	Deskripsi
bottom	Mengatur tepi margin bawah untuk box yang diposisikan
clip	Klip elemen yang diposisikan absolute
left	Mengatur tepi margin kiri untuk box yang diposisikan
right	Mengatur tepi margin kanan untuk box yang diposisikan
top	Mengatur tepi margin atas untuk box yang diposisikan
z-index	Menetapkan urutan tumpukan elemen
position	Menentukan jenis pemosisian untuk suatu elemen

CSS