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
<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.
Tags:
CSS
