Properti position pada CSS digunakan untuk menentukan jenis metode pengaturan posisi yang digunakan untuk suatu elemen (static, relative, fixed, absolute atau sticky).
Properti position
Ada lima nilai properti position yang berbeda, yaitu:
staticrelativefixedabsolutesticky
Semua elemen dapat diposisikan dengan menggunakan properti top, bottom, left dan right. Tapi nilai empat properti ini tidak akan berpengaruh apabila nilai properti position tidak ditentukan. Begitu juga pengaruh dari nilai empat posisi tersebut berbeda-beda tergantung nilai properti position yang dipilih. Properti top, bottom, left dan right hampir sama seperti pemakaian properti margin, bedanya adalah nilai properti top, bottom, left dan right hanya akan berpengaruh apabila nilai properti position disetel dan juga hanya apabila nilai properti position selain static.
Properti position: static
Secara default, elemen HTML diposisikan secara static.
Elemen dengan posisi static tidak terpengaruh oleh properti top, bottom, left dan right. Ke empat properti tersebut tidak akan mempengaruhi posisi elemen. Gunakan properti margin untuk menentukan posisi elemen dengan properti position bernilai static.
Elemen dengan position: static; tidak diposisikan dengan cara khusus dan selalu diposisikan sesuai urutan posisi normal pada halaman.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static</h2>
<p>Sebuah elemen dengan position: static tidak diposisikan dengan cara khusus dan selalu diposisikan sesuai urutan posisi normal pada halaman</p>
<div class= "static">
Elemen div ini memiliki position: static;
</div>
</body></html>Properti position: relative
Elemen dengan position: relative; akan diposisikan secara relatif terhadap posisi normalnya yaitu sesuai dengan nilai properti top, bottom, left dan right.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative</h2>
<p>Elemen dengan position: relative akan diposisikan secara relatif terhadap posisi normalnya yaitu sesuai dengan nilai properti top, bottom, left dan right</p>
<div class= "relative">
elemen div ini memiliki position: relative;
</div>
</body></html>Properti positon: fixed
Elemen dengan position: fixed; dapat diposisikan relatif terhadap viewport, dan akan selalu berada di tempat yang sama meskipun halaman di-scroll. Properti top, bottom, left dan right digunakan untuk memposisikan elemen terhadap viewport.
Perhatikan elemen fixed di pojok kanan bawah halaman. Berikut merupakan cara penggunaan properti position:fixed :
Contoh
<!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>Elemen dengan position: fixed diposisikan relatif terhadap viewport, dan akan selalu berada di tempat yang sama meskipun halaman di-scroll. Properti top, bottom, left dan right digunakan untuk memposisikan elemen terhadap viewport</p>
<div class="fixed">
Elemen div ini memiliki position: fixed;
</div>
</body></html>Properti position: absolute
Elemen dengan position: absolute; dapat diposisikan relatif terhadap wadah terdekat (bukan diposisikan relatif terhadap viewport, seperti fixed).
Namun, jika elemen dengan posisi absolute tidak memiliki posisi, elemen tersebut diposisikan relatif terhadap elemen body, dan berpindah seiring dengan scrolling halaman.
Catatan: Elemen dengan posisi absolute tidak dihitung dalam urutan posisi elemen pada halaman, dan dapat tumpang tindih dengan elemen lainnya.
Contoh
<!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>Elemen dengan position: absolute diposisikan relatif terhadap wadah terdekat (bukan diposisikan relatif terhadap viewport, seperti fixed)</p>
<div class="relative">Elemen div ini memiliki position: relative;
<div class="absolute">Elemen div ini memiliki position: absolute;</div>
</div>
</body></html>Properti position:sticky
Elemen dengan position: sticky; dapat diposisikan berdasarkan posisi scroll pengguna.
Elemen sticky beralih antara relatif dan fixed, bergantung pada posisi scroll . Elemen ini diposisikan relatif sampai posisi offset tertentu terpenuhi di viewport – kemudian akan fix tetap berada di tempatnya (seperti position: fixed).
Dalam contoh ini, elemen sticky menempel di bagian atas halaman (top: 0), saat mencapai posisi scroll .
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Coba <b>scroll</b> di dalam bagian ini untuk memahami cara kerja position: sticky.</p>
<div class="sticky">Saya Sticky!</div>
<div style="padding-bottom:2000px">
<p>Dalam contoh ini, elemen sticky akan menempel di bagian atas halaman (top: 0), saat Anda mencapai posisi scroll active.</p>
<p>Silahkan scroll kembali ke atas untuk menghilangkan efek sticky.</p>
<p>Beberapa 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa 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 iklannya. Eum no molestiae voluptatibus.</p>
</div>
</body></html>Memposisikan Tulisan Pada Gambar
Cara memposisikan tulisan di atas gambar:
Contoh
Memposisikan tulisan pada 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 Gambar</h2>
<p>Menambahkan teks ke gambar di posisi pojok kiri atas:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Kiri Atas</div>
</div>
</body></html>Contoh
Memposisikan tulisan pada 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 Gambar</h2>
<p>Menambahkan teks ke gambar di posisi pojok kanan atas:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Kanan Atas</div>
</div>
</body></html>Contoh
Memposisikan tulisan pada 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 Gambar</h2>
<p>Menambahkan teks ke gambar di posisi pojok kiri bawah</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Kiri Bawah</div>
</div>
</body></html>Contoh
Memposisikan tulisan pada 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 Gambar</h2>
<p>Menambahkan teks ke gambar di posisi pojok kanan bawah</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Kanan Bawah</div>
</div>
</body></html>Contoh
Memposisikan tulisan pada 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 Gambar</h2>
<p>Menambahkan teks ke gambar di posisi tengah</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Terpusat</div>
</div>
</body></html>Referensi Semua Properti CSS Posisi
- bottom : Mengatur jarak margin bawah
- left : Mengatur jarak margin kiri
- position : Menentukan jenis posisi untuk elemen
- right : Mengatur jarak margin kanan
- top : Mengatur jarak margin atas
Properti CSS bottom
Contoh
Berikut contoh posisi elemen <div> yang mempunyai properti bottom beserta variasinya dengan properti position:
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 200px;
border: 3px solid red;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 5px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h1>Properti bottom</h1>
<div class="parent">Elemen div ini memiliki position: relative;
<div class="absolute"><strong>position: absolute dan bottom 10px</strong><br>Tepi bawah div ini ditempatkan 10 piksel di atas tepi bawah elemen penampung.</div>
</div>
<br>
<div class="parent">Elemen div ini memiliki position: relative;
<div class="relative"><strong>position: relative dan bottom 5px</strong><br>Tepi bawah div ini ditempatkan 5 piksel di atas posisi normalnya.</div>
</div>
<br>
<div class="fixed"><strong>position: fixed dan bottom 10px</strong><br>Tepi bawah div ini ditempatkan 10 piksel dari bagian bawah viewport.</div>
<div class="parent">Elemen div ini memiliki position: relative;
<div class="sticky"><strong>position: sticky dan bottom 10px</strong><br>Div ini sticky.</div>
</div>
</body></html>Definisi dan Penggunaan
Properti bottom dapat mengubah posisi vertikal elemen.
Nilai Properti
- auto : Memungkinkan browser menghitung posisi tepi bawah. Ini default.
- length : Atur posisi tepi bawah dalam px, cm, dll. Nilai negatif diperbolehkan.
- % : Atur posisi tepi bawah dalam % elemen penampung. Nilai negatif diperbolehkan.
- initial : Atur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Properti Properti CSS Left
Contoh
Berikut contoh posisi elemen <div> yang mempunyai properti left beserta variasinya dengan properti position:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.b {
position: absolute;
left: auto;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Properti left</h1>
<div class="a">Elemen div ini memiliki position: relative;
<div class="b">Elemen div ini memiliki position: absolute dan left: auto.</div>
<div class="c">Elemen div ini memiliki position: absolute dan ditempatkan 150 piksel di sebelah kanan dihitung dari tepi kiri dari elemen yang menjadi wadahnya.</div>
</div>
</body></html>Definisi dan Penggunaan
Properti left dapat memengaruhi posisi horizontal dari elemen.
Nilai properti
- auto : Memungkinkan browser menghitung posisi tepi kiri. Ini default.
- length : Tetapkan posisi tepi kiri dalam px, cm, dll. Nilai negatif diperbolehkan.
- % : Atur posisi tepi kiri dalam % elemen penampung. Nilai negatif diperbolehkan
- initial : Atur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Contoh
Gunakan properti left dengan nilai negatif dan untuk elemen tanpa wadah yang diposisikan:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.b {
position: absolute;
left: -10px;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Properti left</h1>
<div class="a">Elemen div ini memiliki position: relative;
<div class="b">Elemen div ini memiliki position: absolute dan left: -10px.</div>
</div>
<div class="c">Elemen div ini tidak memiliki elemen wadah/induk, memiliki position: absolute dan ditempatkan 150 piksel di sebelah kanan dihitung dari tepi kiri dari elemen body.</div>
</body></html>Properti CSS position
Contoh
Berikut merupakan contoh properti position dengan elemen <h2> :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>
<h1>Properti position</h1>
<h2>Ini adalah heading dengan position: absolute</h2>
<p>Dengan position: absolute, sebuah elemen dapat ditempatkan di mana saja pada halaman. Judul ditempatkan 100px dari kiri halaman dan 150px dari atas halaman.</p>
</body></html>Definisi dan Penggunaan
Properti position menentukan jenis metode posisi yang digunakan untuk elemen (static, relative, absolute, fixed atau sticky).
Nilai properti
- static : Nilai default. Elemen dirender secara berurutan, seperti yang muncul di alur dokumen.
- absolute : Elemen diposisikan relatif terhadap elemen yang diposisikan pertama (tidak static).
- fixed : Elemen diposisikan relatif terhadap jendela browser.
- relative : Elemen diposisikan relatif terhadap posisi normalnya.
- sticky : Elemen diposisikan berdasarkan posisi pengguna melakukan scroll. Elemen sticky mempunyai nilai properti position yang dapat beralih antara relatif dan fixed, bergantung pada posisi scroll.
- initial : Atur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Contoh
Cara posisi elemen relatif terhadap posisi normalnya:
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 50px;
}
</style>
</head>
<body>
<h1>Properti position</h1>
<p>position: relative menempatkan elemen relatif terhadap posisi aslinya.</p>
<p> style "left: -30px;" posisi elemen dikurangi 30 piksel dari posisi kiri asli elemen.</p>
<p> style "left: 50px;" posisi elemen ditambahkan 50 piksel dari posisi kiri asli elemen.</p>
<h2 class="pos_left">Judul ini dipindahkan ke kiri sesuai posisi normalnya</h2>
<h2 class="pos_right">Judul ini dipindahkan ke kanan sesuai posisi normalnya</h2>
</body></html>Contoh
Contoh pemakaian properti position lainnya:
<!DOCTYPE html>
<html>
<head>
<style>
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent3 {
position: absolute;
border: 1px solid blue;
width: 300px;
height: 100px;
top: 750px;
right: 15px;
}
#child3 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent4 {
position: fixed;
border: 1px solid blue;
background-color: rgba(255,200,200,0.5);
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}
#child4 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
</style>
</head>
<body>
<h1>Properti position</h1>
<h2>position: static</h2>
<div id="parent1">Parent1: position: static.
<div id="child1">Anak1: position: absolute, right: 15px, top: 70px</div>
</div>
<h2>position: relative</h2>
<div id="parent2">Parent2: position: relative.
<div id="child2">Anak2: posisi: absolute, right: 15px, top: 70px</div>
</div>
<h2>position: absolute</h2>
<div id="parent3">Parent3: position: absolute, top: 750px, right: 15px.
<div id="child3">Anak3: position: absolute, right: 15px, top: 70px</div>
</div>
<h2>position: fixed</h2>
<div id="parent4">Parent4: position: fixed, bottom: 0, left: 0, right: 0.
<div id="child4">Anak4: position: absolute, right: 15px, top: 70px</div>
</div>
</body></html>Properti CSS right
Contoh
Atur tepi kanan dari posisi elemen <div> :
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.b {
position: absolute;
right: 0;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
right: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Properti right</h1>
<div class="a">Elemen div ini memiliki position: relative;
<div class="b">Elemen div ini memiliki position: absolute dan right: 0.</div>
<div class="c">Elemen div ini memiliki position: absolute dan ditempatkan 150 piksel di sebelah kiri dihitung dari tepi kanan dari elemen yang menjadi wadahnya.</div>
</div>
</body></html>Definisi dan Penggunaan
Properti right emengaruhi posisi horizontal dari elemen yang diposisikan.
Nilai properti
- auto : Memungkinkan browser menghitung posisi tepi kanan. Ini default.
- length : Tetapkan posisi tepi kanan dalam px, cm, dll. Nilai negatif diperbolehkan.
- % : Atur posisi tepi kanan dalam % dari elemen yang memuat. Nilai negatif diperbolehkan.
- initial : Atur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Contoh
Gunakan properti right dengan nilai negatif dan untuk elemen tanpa wadah yang diposisikan:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.b {
position: absolute;
right: -20px;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
right: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Properti right</h1>
<div class="a">Elemen div ini memiliki position: relative;
<div class="b">Elemen div ini memiliki position: absolute dan right: -20px.</div>
</div>
<div class="c">Elemen div ini tidak memiliki elemen wadah/induk, memiliki position: absolute dan ditempatkan 150 piksel di sebelah kiri dihitung dari tepi kanan elemen body.</div>
</body></html>Properti CSS top
Contoh
Atur tepi atas dari posisi elemen <div> :
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.b {
position: absolute;
top: 0;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 50px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Properti top</h1>
<p>Elemen div merah berikut memiliki position: relative;</p>
<div class= "a">
<div class="b">Elemen div ini memiliki position: absolute, dan top: 0.</div>
<div class="c">Elemen div ini memiliki position: absolute, dan ditempatkan 50 piksel ke bawah dihitung dari tepi atas elemen yang menjadi wadahnya.</div>
</div>
</body></html>Definisi dan Penggunaan
Properti top memengaruhi posisi vertikal elemen yang diposisikan.
Nilai properti
- auto : Memungkinkan browser menghitung posisi tepi atas. Ini default.
- length : Mengatur posisi tepi atas dalam px, cm, dll. Nilai negatif diperbolehkan.
- % : Atur posisi tepi atas dalam % elemen penampung.
- initial : Atur properti ini ke nilai defaultnya.
- inherit : Mewarisi properti ini dari elemen induknya.
Contoh
Gunakan properti top dengan nilai negatif dan untuk elemen tanpa wadah yang diposisikan:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
position: relative;
width: 400px;
height: 200px;
border: 3px solid red;
}
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>Properti top</h1>
<div class="a">Elemen div ini memiliki position: relative;
<div class="b">Elemen div ini memiliki position: absolute dan top: -20px.</div>
</div>
<div class="c">Elemen div ini tidak memiliki elemen wadah/induk, memiliki position: absolute dan ditempatkan 150 piksel ke bawah dihitung dari tepi atas elemen body.</div>
</body></html>Tutorial sebelumnya : Properti Display, Width dan Max-Width CSS
Tutorial setelahnya : Properti Z-Index CSS
Semua Tutorial CSS : Tutorial CSS