Mengatur Tata Letak Elemen pada CSS

Mengatur Tata Letak Elemen pada CSS

CSS

53

Pada tutorial kali ini kita akan membahas tentang cara mengatur tata letak elemen pada CSS, dan mengenal fungsi dari nilai property Static, Relative, Absolute, dan Fixed. Jadi sebenarnya dalam CSS ini kita dapat mengatur letak elemen secara bebas, apakah elemen ini akan kita atur letak nya secara fix ? yang dimana bila kita melakukan scroll maka elemen tetap akan terlihat, atau akan kita tempatkan mengikut parentnya ?.

Sekarang mari kita bahas fungsi dari property position beserta nilai propertynya :

Ada 4 kondisi Positioning Elemen pada CSS, yakni :

  1. Static
  2. Relative
  3. Absolute
  4. Fixed

Namun, ke 4 kondisi di atas hanyalah pengaturannya saja, kita juga harus menentukan nilai dari letak posisinya menggunakan property Top, Right, Left, dan Bottom.

Fungsi Position Static

Secara default nilai dari elemen HTML akan bersifat static. Elemen yang memiliki nilai ini tidak akan dapat dirubah nilai posisinya oleh property Top, Right, Left dan Bottom karena akan mengikuti alur halaman website dan juga efek dari elemen disebelahnya. Oleh karena itu elemen dengan nilai static tidak akan dapat diatur.

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  p.tes{

   width:80px;

   height:80px;

   background-color: dodgerblue;

   color: white;

   font-weight: bold;

   text-align:center;

   position: static;

   top: 110px;

  }

</style>

</head>

<body>

<p>Elemen 1</p>

<p class="tes">Elemen 2</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

Dan di bawah ini adalah hasilnya :

Mengatur Tata Letak Elemen pada CSS

Sekalipun anda merubah nilai posisinya dengan properti top: 110px;, elemen ini akan tetap berada di posisinya, karena settingan awal posisinya yang bersifat static. Dan secara default setiap elemen HTML memiliki posisi static.

Relative

Elemen yang memiliki posisi relative, akan di posisikan berdasarkan posisi normal elemen tersebut, namun bedanya dengan static yakni kita masih dapat mengatur sisi Top, Right, Bottom dan juga Left nya. Namun patokannya adalah dari posisi normal si elemen tersebut.

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  p.tes{

   width:80px;

   height:80px;

   background-color: dodgerblue;

   color: white;

   font-weight: bold;

   text-align:center;

   position: relative;

   top: 50px;

  }

</style>

</head>

<body>

    <p>Elemen 1</p>

    <p class="tes">Elemen 2</p>

    <br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

Dan di bawah ini adalah hasil dari kode sumber di atas :

posisi relative css

Absolute

Sifat ke posisi an elemen terhadap alur halaman website akan dihilangkan, sehingga elemen yang memiliki nilai absolute akan memiliki posisi default di pojok kiri atas halaman. Dan dari sini, kita dapat mengatur nilai Top, Right, Bottom, dan Left nya. Namun masih memiliki keterikatan dengan halaman website, sehingga apabila dilakukan scrolling maka elemen ini tidak akan mengikuti.

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  p.tes{

   width:80px;

   height:80px;

   background-color: dodgerblue;

   color: white;

   font-weight: bold;

   text-align:center;

   position: absolute;

   top: 50px;

  }

</style>

</head>

<body>

<p>Elemen 1</p>

<p class="tes">Elemen 2</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

Di bawah ini adalah hasil dari kode sumber di atas :

posisi absolute pada css

Namun ketika halaman di scrolling ke bawah elemen yang di posisikan absolute tidak akan mengikuti. Karena masih memiliki keterikatan dengan halaman website.

Mengatur Tata Letak Elemen pada CSS

Fixed

Elemen HTML yang memiliki nilai posisi fixed akan terlepas keterikatannya dari halaman website, sehingga posisi elemen ini akan mengikuti layar pada perangkat kalian. Contohnya apabila dilakukan scrolling, elemen ini akan tetap tampil. Dan kita juga dapat mengatur Top, Right, Bottom dan Left – nya.

Contoh source code :

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  p.tes{

   width:80px;

   height:80px;

   background-color: dodgerblue;

   color: white;

   font-weight: bold;

   text-align:center;

   position: fixed;

   top: 50px;

  }

</style>

</head>

<body>

<p>Elemen 1</p>

<p class="tes">Elemen 2</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

Dan di bawah ini adalah hasil dari kode sumber di atas :

posisi fixed pada css

Berbeda dengan posisi tipe absolute, pada tipe posisi fixed, elemen akan tetap mengikuti sekalipun halaman di scrolling :

apa itu properti fixed pada css


Demikian tutorial dari cara Mengatur Tata Letak Elemen pada CSS.

Keywords: mengatur tata letak elemen css, tata letak elemen css

Share: