Frontend : CSS Bagian 10 – Positioning Object

Positioning Object? Sudah jelas dari nama nya, yaitu untuk mengatur posisi sebuah object. Object yang dimaksud adalah sebuah Elemen. Sebelumnya teman-teman sudah mempelajari tentang Box Model, kali ini teman-teman akan mempelajari cara untuk mengatur sebuah elemen. Teman-teman dapat mengubah posisi elemen dengan cara menggunakan margin. Namun ketika teman-teman melakukannya, posisi lain akan terpengaruh. Contoh Seperti gambar dibawah ini…

Maka dari itu kita perlu mengubah position schema dengan Positioning. Berikut terdapat 3 positioning untuk mengatur posisi elemen, diantaranya :


1. Normal Flow / Static Flow

Dalam normal flow, setiap elemen block akan membuat baris baru ketika diterapkan. Ini merupakan cara browser memperlakukan elemen atau tag html.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 10 - Positioning Object</title>
	<style>
	    div p {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin: 25px;
	      text-align: center;
	      background-color: cyan;
	    }
	  </style>
</head>
<body>
	<div>
		<p>Positioning Object</p>
		<p>Positioning Object</p>
	</div>
</body>
</html>


2. Relative Positioning

Dengan menetapkan relative positioning, kita dapat memindahkan elemen ke segala arah arah dan tidak terpengaruh pada elemen sekitar.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 10 - Positioning Object</title>
	<style>
	    .static {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin: 25px;
	      text-align: center;
	      background-color: cyan;
	      position: static;
	    }
	    .relative {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin-top: -50px;
	      text-align: center;
	      background-color: cyan;
	      position: relative;
	    }
	  </style>
</head>
<body>
	<div class="static">
		<p>Static Flow</p>
	</div>
	<div class="relative">
		<p>Relative Positioning</p>
	</div>
</body>
</html>


3. Absolute Positioning

Sama dengan relative positioning, namun yang membedakan ialah Absolute Positioning tidak dianggap ada oleh elemen lain. Akibatnya, posisi elemen yang menggunakan Absolute Positioning akan ditempati oleh elemen yang berada dibawahnya.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 10 - Positioning Object</title>
	<style>
	    .static {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin: 25px;
	      text-align: center;
	      background-color: cyan;
	      position: static;
	    }
	    .absolute {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin-top: -50px;
	      text-align: center;
	      background-color: cyan;
	      position: absolute;
	    }
	  </style>
</head>
<body>
	<div class="static">
		<p>Static Flow</p>
	</div>
	<div class="absolute">
		<p>Absolute Positioning</p>
	</div>
	<div class="static">
		<p>Static Flow</p>
	</div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *