Skip to main content

Position Relative dan Absolute Pada CSS

· 3 min read
Jacky Rusly

Pada artikel kali ini saya akan membahas Position Relative dan Absolute Pada CSS. Penting sekali sebagai Frontend kita tahu bedanya position relative dan absolute. Saya akan coba contohkan bagaimana caranya kita bisa membuat Search Input seperti gambar berikut ini:

Search Example

Position Relative​

Ketika kita coba mengatur salah satu element HTML menjadi position: relative, maka kita bisa menggunakan attribute css top, right, bottom, dan left untuk mengatur posisi element tersebut dan element tersebut akan menjadi parent (Contohnya bisa dilihat pada Mengatur Parent).

Contohnya:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Relative</title>
  <style>
    .wrapper {
      width: 300px;
      border: 1px solid lightgray;
      border-radius: 0.5rem;
      padding: 1rem;
    }

    .title {
      position: relative;
      left: 20px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h1 class="title">Judul</h1>

    <p>Isi</p>
  </div>
</body>

</html>

Dari contoh HTML di atas, dapat dilihat kita mengatur position: relative dan left: 20px pada judul, maka judul akan bergeser dari kiri sebanyak 20px.

Relative

Position Absolute​

Ketika kita coba mengatur salah satu element HTML menjadi position: absolute, maka kita bisa menggunakan attribute css top, right, bottom, dan left untuk mengatur posisi element tersebut. Namun bedanya dengan relative adalah element akan mengambang dan jika kita mengatur posisi element tersebut, patokan pergeserannya adalah dari parent nya.

Contohnya:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Relative</title>
  <style>
    .wrapper {
      width: 300px;
      border: 1px solid lightgray;
      border-radius: 0.5rem;
      padding: 1rem;
    }

    .title {
      position: absolute;
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h1 class="title">Judul</h1>

    <p>Isi</p>
  </div>
</body>

</html>

Dari contoh HTML di atas, dapat dilihat kita mengatur position: absolute dan right: 20px pada judul, maka posisi judul akan berada 20px dari sebelah kanan parent nya. Dalam kasus ini karena kita tidak mengatur parent, maka default nya adalah Viewport.

Absolute

Mengatur Parent​

Kita akan coba mengatur parent element judul menjadi element .wrapper. Sehingga element judul tidak keluar dari .wrapper. Caranya adalah kita perlu menambahkan position: relative pada .wrapper.

<!DOCTYPE html>
<html lang="id">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Position Absolute + Relative</title>
  <style>
    .wrapper {
      width: 300px;
      border: 1px solid lightgray;
      border-radius: 0.5rem;
      padding: 1rem;
      position: relative;
    }

    .title {
      position: absolute;
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <h1 class="title">Judul</h1>

    <p>Isi</p>
  </div>
</body>

</html>

Bisa dilihat pada gambar di bawah ini. Ketika kita tambahkan position: relative pada element .wrapper menyebabkan judul bergeser 20px dari kanan element .wrapper.

Absolute Relative

Demo​

Kita akan mencoba membuat Search Input yang di dalamnya ada icon search dengan menggunakan position relative dan absolute.

<!DOCTYPE html>
<html lang="id">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Input</title>
  <style>
    .search-wrapper {
      position: relative;
    }

    .search-wrapper .icon {
      position: absolute;
      left: 10px;
      height: 100%;
    }

    .search-wrapper input {
      background-color: #EBEDF0;
      border-radius: 2rem;
      padding: 0.5rem 0.5rem 0.5rem 2rem;
      border: none;
    }
  </style>
</head>

<body>
  <div class="search-wrapper">
    <svg class="icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>
    <input placeholder="Search">
  </div>
</body>

</html>

Search Demo

Contoh Kasus​

Berikut beberapa contoh kasus yang memakai position relative dan absolute:

Contoh 1

Example 1

Contoh 2

Example 2

Penutup​

Terimakasih sudah membaca artikel Position Relative dan Absolute Pada CSS. Semoga artikel ini bisa bermanfaat bagi teman-teman.