Tentang penggunaan position absolute - Agiel Triono

Tentang penggunaan position absolute

Baca Juga

Di bagian CSS (Cascading Style Sheet) terdapat 4 buah position relative,absolute,static,fixed. Yang akan saya bahas kali ini adalah Position Absolute (position:absolute).

Penggunaan style absolute hampir mirip dengan Fixed dimana perbedaan nya adalah pada position fixed melayang pada seluruh parent element atau element teratas contoh : body , head artinya tidak penting dimana di tempatkan maka akan tetap berada di atas dari sebuah element lain nya terkecuali apabila position fixed di beri z-index:0 namun, lain hal nya dengan position absolute,position absolute digunakan di dalam sebuah parent element yang wajib memiliki position relative contoh : wrapper.

Perlu diketahui juga sob penggunaan position absolute sangat terbatas pada tampilan smartphone/handphone/android/ios.
karena apabila tidak menggunakan @media screen yang tidak tepat akan membuat element menghilang dari layar, atau akan menutupi bagian element lain.

Jadi element dengan markup seperti <div style="position:absolute">position absolute</div> yang terdapat pada <div style="position:relative"></div>.
maka akan berada di dalam element tersebut atau fit dengan parent element dengan style position relative.

contoh:
<div style="position:relative">
  <div style="position:absolute">position absolute</div>
</div>

Namun sobat harus membuat satu atau dua style tambahan yaitu antara left:0,right:0,top:0,bottom:0. Disini saya akan membuat nya dengan top:0 dan right:0 itu artinya posisi element akan ada pada bagian dalam kanan atas element. Dan , gunakan margin:0;padding:0 pada parent element , anda juga boleh menggunakan tambahan max-width,dan max-height atau width dan height jika di perlukan dan ingat width dengan max-width berbeda bila element di dalam kosong maka lebar atau width akan ke angka 0 namun apabila anda menggunakan atau combine keduanya contoh: max-width:500px;width:100% maka biarpun tidak ada element di dalam nya lebar akan tetap 500px namun apabila anda menulis max-width:500px;width:300px dengan tanpa adanya element di dalamnya maka width selalu pada angka 0 sebaliknya apabila ada element di dalamnya maka max-width:500px tidak terpakai dikarenakan width:300px sudah di iplementasikan.

tips : anda dapat menggunakan ukuran Relative atau Absolute lihat pada artikel w3schools.com.

Absolute


Luas Keterangan
cm centimeters
mm millimeters
in inches
px pixels
pt points
pc picas

Relative


Luas Keterangan
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

<div style="position:relative;margin:0;padding:0;max-width:500px;width:100%">
  <div style="position:absolute;top:0;right:0">position absolute</div>
</div>

saya jelaskan penggunaan atribut style disini.
jika anda menggunakan atribut style maka anda tidak perlu menulis CSS pada markup <style>...</style> dengan sebuah selector element tersebut, jika anda menulis sebuah CSS dengan selector namun terindikasi element tersebut sudah memiliki style maka penulisan seperti ini adalah salah namun tidak dapat di katakan salah apabila anda menggunakan javascript untuk membuat style tertentu dengan selector tertentu yang memang element tersebut sudah memiliki style default dan ingin merubah element tersebut pada element yang sudah di tentukan saja.

<style type="text/css">
.contoh {
  position: relative;
  background: #f1f1f1;
  border: 2px solid #ddd;
  display: block;
  margin: 1em auto;
  padding: 0;
  max-width: 500px;
  max-height: 200px;
  min-height: 100px;
  width: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

.pos-absolute {
  position: absolute;
  color: #222;
  background: #fafafa;
  font-size: 13px;
  padding: 10px;
  margin: 5px;
  top: 0;
  right: 0
}
</style>

<div class="contoh">
  <div class="pos-absolute">position absolute</div>
</div>



Demikian bagaimana menulis kode css position absolute. Semoga saja dapat menambah pengetahuan bagi anda yang ingin mengetahui style position pada CSS, setidak nya bermanfaat untuk anda pelajari. Terima Kasih.

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.