CSS Position : Absolute, penting tapi bikin pusing
seri fundamental css
di artikel sebelumnya , kita sudah membahas position: relative, dimana jika kita menggunakan position relative, maka elemen tersebut akan maju satu dimensi dan posisinya menjadi relative terhadap posisi aslinya, bisa kunjungi disini :
nah untuk Absolute sendiri, sebenarnya hampir sama, kita langsung coba saja , misal kita punya tiga elemen div :
<body>
<div class="con con1">1</div>
<div class="con con2">2</div>
<div class="con con3">3</div>
</body>dan kita set, positonnya menjadi : absolute
.con {
width: 200px;
height: 200px;
}
.con1 {
background-color: #7dcff0;
}
.con2 {
position: absolute; // set position menjadi absolute
background-color: yellow;
}
.con3 {
background-color: #7dcff0;
}maka hasilnya akan menjadi seperti ini :
nah, ko`malah ilang box ketiganya ?, jadi jika kita set posisinya absolute, maka elemen tersebut akan maju satu dimensi, dan bukan hanya itu, jika posisi “relative” area yang ditempati sebelumnya masih ada, maka posisi absolute are yang ditempati sebelumnya akan dianggap tidak ada, oleh elemen lain yang static, coba kita lihat dalam 3d:
sama seperti elemen yang posisinya “relative”, posisi absolute juga memungkinkan kita untuk menggerakan elemen tersebut ke atas / bawah/kiri/kanan, misalnya kita ubah posisinya menjadi :
.con2 {
position: absolute;
background-color: yellow;
left: 50px;
}maka sudah bisa dibayangkan hasilnya akan menjadi seperti ini :
jika kita menggeser elemen tersebut ke kiri saja, posisinya masih “seperti” relativ terhadap area sebelumnya (sebelum maju satu dimensi), tapi begitu kita set properti (right / top / button) :
.con2 {
position: absolute;
background-color: yellow;
left: 50px;
top: 30px;
}maka hasilnya menjadi seperti ini :
kita bisa lihat bahwa ternyata elemen absolute itu selain maju satu dimensi, juga ia relative terhadap elemen pembungkusnya (elemen parentnya) jika dalam kode diatas elemen parentnya adalah <body> maka box kuning posisinya relatif terhadap elemen <body>,
mari kita coba bungkus ketiga elemen kotak , kedalam container sebagai parent elemennya :
<body>
<div class="container">
<div class="con con1">1</div>
<div class="con con2">2</div>
<div class="con con3">3</div>
</div>
</body>dan posisinya kita ubah menjadi absolute:
.container {
border: solid black 10px;
width: 600px;
height: 600px;
margin: auto;
}.con2 {
position: absolute;
background-color: yellow;
left: 0px;
top: 0px;
}
maka hasilnya akan menjadi seperti ini :
nah lo.. malah jadi seperti ini, elemen absolutenya ko malah keluar dari container, katanya relative terhadap parent elemennya ? ternyata begini gan.. si elemen absolute dalam hal ini box kuning, itu baru bisa relative terhadap parent yang memiliki position non-static, jadi jika parent elementnya masih default, maka si elemen absolute masih relative terhadap elemen <body>, kita bisa ilustrasikan seperti ini :
solusinya kita set position: relative pada parent elementnya supaya parent elemennya juga maju 1 dimensi :
.container {
border: solid black 10px;
width: 600px;
height: 600px;
margin: auto;
position: relative; // supaya maju satu dimensi
}
.con2 {
position: absolute;
background-color: yellow;
left: 0px;
top: 0px;
}maka hasilnya akan seperti ini ilustrasinya :
nah… ketika elemen parentnya maju satu dimensi maka elemen box kuning bisa kita atur posisinya berdasarkan parent elemen terdekatnya..
Terimakasih.
Sumber : Web Programming Unpas