Posisi Absolute Tanpa Koordinat di CSS
Sebenarnya, menentukan koordinat saat menggunakan posisi absolute
tidaklah wajib. Jika sebuah elemen hanya diberikan
position dengan nilai
absolute, maka elemen tersebut akan menjadi terposisikan secara absolute,
tetapi akan tetap berada di tempat yang sama.
Sementara itu, semua elemen lainnya akan
berperilaku seolah-olah elemen kita tidak ada
dan dapat menimpanya.
Mari kita lihat contoh-contohnya.
Contoh
Pertama-tama, mari buat tiga blok tanpa properti posisi dan beberapa teks di antara mereka:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Contoh
Sekarang mari kita tambahkan absolute ke blok hijau.
Hasilnya, blok ini akan tetap di tempatnya,
sementara semua elemen di bawahnya akan berperilaku seolah-olah
elemen kita tidak ada dan akan menimpanya:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Contoh
Sekarang mari kita tambahkan properti left,
tanpa menambahkan posisi vertikal. Hasilnya,
secara horizontal blok kita akan berada pada nilai yang ditentukan,
sementara secara vertikal - akan tetap berada
di tempat asalnya:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* menambahkan posisi horizontal */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Contoh
Sekarang, sebaliknya, mari tambahkan properti
top, tanpa menambahkan posisi horizontal.
Hasilnya, secara vertikal blok kita akan berada
pada nilai yang ditentukan, sementara secara horizontal -
akan tetap berada di tempat asalnya:
<div id="elem1"></div>
<div id="elem2"></div>
teks teks teks teks teks teks
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* menambahkan posisi vertikal */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
