Contoh Absolute Positioning di CSS

Ketika properti position diberikan nilai absolute, akan berperilaku sama dengan relative. Elemen akan dikeluarkan dari normal flow sehingga jika elemen dipindahkan posisinya tidak akan berpengaruh pada elemen lain di sekitarnya. 
Namun yang membedakannya adalah elemen ini benar-benar tidak dianggap ada oleh elemen pada normal flow. Akibatnya, lokasi awal elemen yang diberikan nilai absolute akan ditempati oleh elemen di bawahnya.

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <style>

  5.        h1 {

  6.            width: 250px;

  7.        }

  8.  

  9.        p {

  10.            width: 450px;

  11.        }

  12.  

  13.        .absolute {

  14.            position: absolute;

  15.            top: 0;

  16.            left: 500px;

  17.        }

  18.    </style>

  19. </head>

  20. <body>

  21. <h1 class="absolute">Lorem ipsum dolor sit amet.</h1>

  22. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda

  23.    blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>

  24. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga

  25.    hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>

  26. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi

  27.    expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde.

  28.    Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>

  29. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex

  30.    expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae?

  31.    Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus

  32.    distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitia

  33.    nobis?</p>

  34. </body>

  35. </html>


Jika berkas di atas dibuka pada browser, maka akan tampak seperti ini:
20191206222208c8e33dd5f988979253a4e076ec5bbde2.png
Pada contoh di atas kita bisa lihat bahwa ketika elemen heading menerapkan properti position dengan nilai absolute maka elemen di bawahnya (paragraf) akan menempati posisi yang sebelumnya ditempati oleh elemen heading tersebut. 
Dan perpindahan posisi ketika menggunakan absolute akan relatif pada jendela browser. Kita bisa lihat bahwa elemen heading bergeser 500px dari kiri. Tapi selain relatif terhadap jendela browser, nilai ini juga dapat relatif pada elemen yang menaunginya (elemen induk) selama elemen tersebut juga berada di luar normal flow. Namun jika tidak, elemen akan menghiraukan elemen induknya tersebut. Contohnya:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <style>

  5.        .parent {

  6.            width: 500px;

  7.            margin: 0 auto;

  8.            border: 4px solid black;

  9.            padding: 20px;

  10.        }

  11.        h1 {

  12.            width: 250px;

  13.        }

  14.        .absolute {

  15.            position: absolute;

  16.            top: 0;

  17.            left: 50px;

  18.        }

  19.    </style>

  20. </head>

  21. <body>

  22. <div class="parent">

  23.    <h1 class="absolute">Lorem ipsum dolor sit amet.</h1>

  24.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>

  25.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>

  26.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>

  27.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae? Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitianobis?</p>

  28. </div>

  29. </body>

  30. </html>


Jika kita buka berkas di atas pada browser maka akan tampak seperti ini:
20191206222508f6f2e4daadf2b45c36f13e4b8dcf36d7.gif
Pada contoh kode di atas kita bisa lihat pada .parent kita tidak menetapkan properti position, sehingga elemen yang menerapkannya berada pada flow normal. Sehingga elemen heading akan menghiraukan elemen induknya.
Berbeda ketika .parent menerapkan properti position dengan nilai yang dapat mengeluarkannya dari normal flow, contohnya nilai relative.

  1. position: relative;


Dengan begitu posisi elemen heading akan relatif terhadap .parent.
201912062227185bd34a06c8b0b5545cbb2e882a8af4bb.gif

Komentar

Posting Komentar