Devid Septian
Mar 6, 2017 · 3 min read

TRIK CSS: ABSOLUTE DI DALAM RELATIVE


Halo, pada sesi ini saya ingin sekali menuliskan sebuah trik CSS yang sangat sering sekali digunakan dan sangat membantu sekali dalam proses konversi desain web menjadi sebuah HTML template berdasarkan pengalaman saya sendiri.

Absolute dan relative yang kita bahas di sini adalah sebuah value dari sebuah property position pada CSS. Pada CSS, kita dapat menggunakannya melalui selector id atau class.

Yang ingin saya bahas di sini adalah:

  • Mengamati apa yang terjadi jika suatu elemen absolute berada pada elemen relative.
  • Apa yang dapat dilakukan pada elemen absolute di dalam elemen relative tersebut

Pertama saya ingin memperlihatkan penggunaan position absolute terlebih dahulu, lihat code berikut:

Absolute

Pada tab result, perhatikan kotak berwarna pink. Kotak tersebut memiliki atribut class child yang memiliki style CSS yaitu position absolute, silakan lihat pada tab HTML dan CSS.

Jadi ketika suatu elemen tersebut absolute, maka letak posisi dari elemen tersebut tidak terikat pada elemen manapun, walaupun elemen absolute tersebut berada di dalam elemen lain.

Pada contoh di atas, elemen kotak berwarna pink keluar dari elemen kotak berwarna biru. Padahal jika kita lihat pada struktur HTML-nya, elemen kotak berwarna pink tersebut berada di dalam elemen kotak berwarna biru.

Untuk posisi dari elemen absolute tersebut ditentukan pada property top dan left, lihat pada contoh di atas pada tab CSS pada class child.

Property top, left, right dan bottom hanya dapat digunakan pada elemen yang selector-nya memiliki property position absolute atau relative, seperti pada class child pada contoh di atas.

Selanjut nya kita akan melihat apa yang terjadi jika kotak berwarna biru dengan class parent kita tambahkan property position: relative pada code CSS nya. Bisa kita lihat pada contoh code di bawah ini:

Absoute Relative

Dari hasil di atas dapat kita lihat elemen pink dengan position absolute tersebut terikat pada elemen yang berwarna biru.

Dengan demikian dapat disimpulkan bahwa elemen relative dapat mengikat atau membatasi elemen absolute yang ada didalamnya

Setelah mengetahui apa yang terjadi jika elemen absolute berada pada elemen relative, maka kita dapat melekukan trik yang hanya dapat dilakukan jika elemen absolute berada di dalam elemen relative.

Yaitu kita dapat membuat suatu elemen berada di tengah-tengah atau middle center.

Untuk lebih jelas nya mari kita lihat contoh di bawah ini:

Middle Center

Dari contoh di atas dapat kita lihat, elemen kotak berwarna pink berada di tengah-tengah element kotak berwarna hitam. Caranya adalah dengan sedikit menambahkan code CSS berikut pada class child seperti di bawah ini

top: 50%;
right: 50%;
margin-top: -15px;
margin-right: -15px;

Kita juga dapat melakukan cara di atas dengan menggunakan CSS3 Transform: translate(). Silahkan lihat contoh berikut:

Transform Translate

Contoh di atas adalah salah satu contoh penggunaan absolute di dalam relative masih ada beberapa hal lain yang dapat kita lakukan.

Tidak hanya middle center, dengan memanfaatkan absolute di dalam relative kita dapat membuat hal lain yang sangat membatu kita dalam mengkonversi sebuah desain web menjadi sebuah HTML template.

Oke sekian, semoga bermanfaat dan selamat mencoba.

SkyshiDigital

We help scale up your startup to the next level

Devid Septian

Written by

Front End Developer

SkyshiDigital

We help scale up your startup to the next level

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade