Pemposisian Relatif Unsur dalam CSS

Pemposisian relatif ditetapkan menggunakan nilai relative untuk sifat position. Pemposisian sedemikian membolehkan unsur dialihkan relatif kepada kedudukan semasanya pada nilai yang ditetapkan. Pada masa yang sama, kesemua unsur lain pada halaman akan menganggap bahawa unsur tersebut berada di kedudukan asalnya. Maksudnya, dengan jenis pemposisian ini, unsur tidak keluar dari aliran normal.

Anjakan dari kedudukan semasa ditetapkan oleh sifat-sifat top, right, bottom dan left.

Contoh

Pertama, mari kita buat dua blok tanpa pemposisian:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Sekarang mari tambahkan relative kepada blok pertama. Buat masa ini tiada perubahan kerana kita belum menetapkan anjakan blok:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Sekarang mari kita alihkan blok kita sebanyak 30px dari atas, dengan menetapkan sifat top. Pada masa yang sama, semua unsur lain akan berkelakuan seolah-olah blok kita kekal di tempat asalnya:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Mari kita juga alihkan blok kita sebanyak 40px dari kiri, dengan menetapkan sifat left:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	left: 40px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Contoh

Nilai negatif untuk sifat top, right, bottom dan left mengalihkan ke arah yang bertentangan. Sebagai contoh, nilai positif top mengalihkan ke bawah, manakala nilai negatif - ke atas.

Mari alihkan blok kedua kita sebanyak 40px ke atas, dengan menetapkan nilai negatif untuk sifat top:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Masalah Amali

Diberi blok-blok berikut:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Alihkan blok-blok ini menggunakan pemposisian relatif seperti berikut: