Absolute positioning adalah salah satu teknik CSS yang menarik. Dengan absolute positioning, element akan dikeluarkan daripada flow yang asal dan diletakkan di tempat yang ditetapkan.
Contoh kegunaan absolute positioning
Untuk tukarkan ini:
Kepada ini:
Dalam gambar pertama, teks “kekucing mata kecik” berada di bawah gambar kerana ia menggunakan default position iaitu static. Dengan mengunakan absolute positioning, teks tersebut diletakkan di atas gambar.
Syntax asas
HTML:
1 2 3 4 |
CSS:
1 2 3 4 5 6 7 8 9 | .kucing { position:relative; } .kucing span.caption{ position:absolute; bottom:15px; right:0; } |
Div parent (.kucing) haruslah mempunyai property:
1 | position:relative |
manakala div yang ingin menggunakan absolute positioning (span.caption)haruslah mempunyai property:
1 | position:absolute |
Korang boleh guna top, bottom, left dan right untuk menentukan kedudukan element yg menggunakan absolute positioning.
WTF? Tak faham la cb!
Lemau la ko ni. Klik link di bawah untuk lebih penerangan dan demo.
Bagus ni.. jilaka baru nak kluar post..
lulz..
lepas aku tolong ko aritu, terus aku tulis..
tapi baru ari ni publish..