Sifat position

Sifat position menentukan kaedah pemposisian elemen. Sifat ini paling kerap digunakan bersama-sama dengan sifat-sifat top, right, bottom, left, yang menetapkan jarak dari atas, kanan, bawah, kiri masing-masing.

Sintaks

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

Nilai untuk position

Nilai	Keterangan
`absolute`	Pemposisian mutlak. Elemen dikeluarkan daripada aliran normal dokumen dan diposisikan relatif kepada leluhur terdekat yang diposisikan (jika ada) atau relatif kepada tetingkap pelayar.
`relative`	Pemposisian relatif. Elemen digeser relatif kepada kedudukan normalnya dalam aliran dokumen, tetapi ruang yang pernah didudukinya, kekal terpelihara.
`fixed`	Pemposisian tetap. Elemen dikeluarkan daripada aliran normal dokumen dan diposisikan relatif kepada tetingkap pelayar. Kekal di tempat semasa halaman ditatal.
`static`	Pemposisian statik. Nilai ini bermaksud tiada pemposisian dan elemen berkelakuan seperti biasa.
`sticky`	Pemposisian melekit. Elemen berkelakuan seperti `relative`, sehingga mencapai posisi yang ditetapkan semasa penatalan, selepas itu ia melekat pada tempat yang ditentukan (seperti `fixed`).

Nilai lalai: static.

Contoh . Pemposisian mutlak

Mari letakkan elemen di penjuru kiri atas skrin dengan jarak yang 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 . Pemposisian mutlak

Sekarang mari letakkan elemen di penjuru kanan atas skrin dengan jarak yang 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 . Pemposisian tetap

Dengan pemposisian tetap, elemen akan kekal di tempat semasa ditatal:

<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 . Pemposisian relatif

Dengan pemposisian relatif, elemen digeser relatif kepada kedudukan normalnya, tetapi elemen-elemen lain berkelakuan seolah-olah elemen tersebut tidak digeser:

<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 . Penyarangan

Jika ibu bapa mempunyai sifat position dengan nilai relative, maka elemen yang diposisikan secara mutlak akan diposisikan relatif kepada ibu bapa:

<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 . Penyarangan

Jika ibu bapa mempunyai sifat position dengan nilai absolute, maka elemen yang diposisikan secara mutlak akan diposisikan relatif kepada ibu bapa:

<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 . Pemposisian melekit

Jika untuk elemen sifat position mempunyai nilai sticky, maka elemen berkelakuan seperti relative, sehingga mencapai posisi yang ditetapkan semasa penatalan, selepas itu ia melekat pada tempat. Mari buat header melekit:

<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 pemposisian mutlak tanpa menentukan posisi, maka elemen akan kekal berada di tempat, di mana ia berada tanpa pemposisian, tetapi elemen-elemen lain akan berhenti mengambil kira kewujudannya:

<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 paksi

Dengan pemposisian mutlak, posisi boleh ditetapkan hanya pada satu paksi. Sebagai contoh, jika kita menetapkan sifat top, maka secara menegak elemen akan berada pada posisi yang ditetapkan, tetapi secara mendatar akan kekal berada, di mana ia 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 pemposisian mutlak, posisi boleh ditetapkan dari semua sisi, tanpa menentukan lebar dan tinggi. Dalam kes ini, elemen akan berada di tengah-tengah blok ibu bapa:

<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

sifat z-index,
yang menetapkan tindanan elemen