Properti position

Properti position menentukan metode pemosisian elemen. Properti ini paling sering digunakan bersama dengan properti top, right, bottom, left, yang mengatur jarak dari atas, kanan, bawah, kiri secara berurutan.

Sintaksis

selektor {
	position: absolute | relative | fixed | static | sticky;
}

Nilai untuk position

Nilai	Deskripsi
`absolute`	Pemosisian absolut. Elemen dihapus dari aliran normal dokumen dan diposisikan relatif terhadap leluhur terdekat yang diposisikan (jika ada) atau relatif terhadap jendela browser.
`relative`	Pemosisian relatif. Elemen bergeser relatif terhadap posisi normalnya dalam aliran dokumen, tetapi ruang yang sebelumnya ditempatinya tersisa dan tetap dipesan.
`fixed`	Pemosisian tetap. Elemen dihapus dari aliran normal dokumen dan diposisikan relatif terhadap jendela browser. Tetap di tempat saat halaman di-scroll.
`static`	Pemosisian statis. Nilai ini berarti tidak ada pemosisian dan elemen berperilaku seperti biasa.
`sticky`	Pemosisian lengket. Elemen berperilaku seperti `relative`, hingga mencapai posisi yang ditentukan saat di-scroll, setelah itu menempel di tempat yang ditentukan (seperti `fixed`).

Nilai default: static.

Contoh . Pemosisian Absolut

Mari posisikan elemen di sudut kiri atas layar dengan jarak kecil:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Contoh . Pemosisian Absolut

Dan sekarang mari posisikan elemen di sudut kanan atas layar dengan jarak kecil:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Contoh . Pemosisian Tetap

Dengan pemosisian tetap, elemen akan tetap di tempat saat di-scroll:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Contoh . Pemosisian Relatif

Dengan pemosisian relatif, elemen bergeser relatif terhadap posisi normalnya, tetapi elemen lain berperilaku seolah-olah elemen tersebut tidak bergeser:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Contoh . Bersarang

Jika induk memiliki properti position dengan nilai relative, maka elemen yang diposisikan secara absolut akan diposisikan relatif terhadap induk:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Contoh . Bersarang

Jika induk memiliki properti position dengan nilai absolute, maka elemen yang diposisikan secara absolut akan diposisikan relatif terhadap induk:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Contoh . Pemosisian Lengket

Jika untuk elemen, properti position bernilai sticky, maka elemen berperilaku seperti relative, hingga mencapai posisi yang ditentukan saat di-scroll, setelah itu menempel di tempat. Mari buat header yang lengket:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Contoh . Tanpa Posisi

Jika elemen diberikan pemosisian absolut tanpa menentukan posisi, maka elemen akan tetap berada di tempat, di mana ia berada tanpa pemosisian, tetapi elemen lain akan berhenti memperhatikannya:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Contoh . Satu Sumbu

Dengan pemosisian absolut, Anda dapat menentukan posisi hanya pada satu sumbu. Misalnya, jika kita mengatur properti top, maka secara vertikal elemen akan berada pada posisi yang ditentukan, tetapi secara horizontal akan tetap berada di tempat asalnya:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Contoh . Semua Posisi

Dengan pemosisian absolut, Anda dapat menentukan posisi dari semua sisi, tanpa menentukan lebar dan tinggi. Dalam hal ini, elemen akan berada di tengah blok induk:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Lihat Juga

properti z-index,
yang menentukan penumpukan elemen