Site icon Pesona Informatika

Belajar CSS (15. Position)

Akhi Syabab

Position Dalam CSS

Diskripsi : Position adalah properti yang digunakan untuk menentukan metode pemposisian pada suatu element. Dalam materi position terdapat beberapa properti yang digunakan untuk mendukung dari properti position yaitu bottom, clip, cursor, left, overlow, position, rigth, top, z-index.
Value : static, absolute, fixed, relative.

1. static
value static merupakan default dari properti position. Misal kita menambahkan properti bottom, left, right, atau top, maka tidak akan ada effect atau perubahanya
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		div.static {
		    position: static;
		    border: 3px solid #73AD21;
		    bottom: 10px;
		}
	</style>
</head>
<body>
	<h2>position: static;</h2>
	<p>An element with position: static; is not positioned in any special way; it is 
	always positioned according to the normal flow of the page:</p>
	<div class="static">
		This div element has position: static;
	</div>
</body>
</html>

pada contoh kode diatas, kita menambahkan properti bottom, tapi tidak ada perubahan jika kita tidak menuliskanya karena kita menggunakan value static pada properti position.

2. relative
Berbeda dengan value static, dengan value relative kita dapat menentukan jarak element baik kiri, kanan, atas, maupun bawah.
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		div.relative {
		    position: relative;
		    border: 3px solid #73AD21;
		    top: 0px;
		    left: 30px;
		}
	</style>
</head>
<body>
	<h2>position: relative;</h2>
	<p>An element with position: relative; is positioned relative to its normal position:</p>
	<div class="relative">
		This div element has position: relative;
	</div>
</body>
</html>

Kami hanya memberi contoh value relative pada properti position dengan tambahan properti left, untuk mengetahui dan memahami secara jelas maksut dari value relative, silahkan coba sendiri dengan mengganti misalkan left menjadi right, menambah value sekian px dari properti top, dll

3. fixed
Dengan kita menggunakan value fixed, maka element yang kita atur akan mempunyai posisi yang tetap walaupun browser di scrool ke bawah. Mungkin anda pernah menjumpai situs dimana saat kita scrool ke bawah, posisi menu tetap di posisinya dan tidak hilang.
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		div.fixed {
		    position: fixed;
		    top 10px;
		    left: 30px;
		    width: 300px;
		    border: 3px solid #73AD21;
		}
	</style>
</head>
<body>
	<h2>position: fixed;</h2>
	<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
	<div class="fixed">
	This div element has position: fixed;
	</div><br /><br /><br /><br />
	<p>check</p><br /><br /><br /><br /><br /><br />
	<p>check</p><br /><br /><br /><br /><br /><br />
	<p>check</p><br /><br /><br /><br /><br /><br />
	<p>check</p><br /><br /><br /><br /><br /><br />
</body>
</html>


jika kita scroll ke bawah pada browser kita, maka posisi dari kalimat dalam class fixed diatas akan tetap dan tidak akan hilang.

4. absolute
value absolute sebetulnya seperti relative, namun dia akan mengatur relative terhadap yang membungkusnya( jika terdapat nenek moyang), bukan relative terhadap viewport atau tampilan browser penuh.
ex.

<!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>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
	<div class="relative">This div element has position: relative;
	  <div class="absolute">This div element has position: absolute;</div>
	</div>
</body>
</html>

Setelah kita lihat contoh diatas, kita dapat memahami bahwa element dengan menggunakan value absolute, dia mengatur jarak terhadap element dengan value relative , bukan mengatur jarak terhadap vieport seperti halnya position : relative.

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.

Written by @akhi_syabab

Exit mobile version