Page 335 - SK tingkatan 5

Contoh:
Titik asal (0, 0) Apabila kotak ke-4 ingin ditambah, maka kotak tersebut
1 akan diletakkan di kedudukan yang terbawah, iaitu di
bawah kotak ke-3.
Titik origin (0,0)
2

3 Tiga blok berasingan dari pandangan “Browser Viewport”

• Fixed
Tiga blok berasingan dari padangan “Browser Viewport”
Kedudukan elemen bergantung pada browser viewport, iaitu pada pandangan pengguna kepada
pelayar web. Kedudukan elemen akan tetap di kedudukan yang sama walaupun pengguna scroll
pada halaman web.
• Relative
Kedudukan elemen diubah bergantung atau berkait terhadap kedudukan normalnya atau kedudukan
awalnya.
Contoh:
Apabila kedudukan kotak ke-2 ditukar kepada
1 top:50px dan left:20px, maka kotak ke-2 akan
berganjak ke bawah sebanyak 50px dan berganjak
ke kanan sebanyak 20px. Kotak yang lain tidak akan
posisi normal/posisi awal
posisi normal/posisi awal dipengaruhi oleh perubahan pada kotak ke-2.
2 posisi setelah dikenakan
top : 50px, left : 20px
3 posisi setelah dikenakan
top : 50px, left : 20px

• Absolute
Kedudukan elemen tidak akan mengikut turutan atau susunan pada laman web lagi dan akan
ditempatkan mengikut kedudukan yang dikehendaki.
Contoh:
Titik asal (0, 0)
Kedudukan kotak ke-2 tidak akan mengikut
turutan atau susunan dalam laman web dan
posisi setelah dikenakan
top : 50px, left : 20px
2 posisi setelah dikenakan menuju ke titik asal. Kedudukan kotak ke-2
akan berubah, iaitu berganjak sebanyak 20px ke
top : 20px, left : 20px Titik origin (0,0)
3 bawah dan 20px ke kanan yang dikira bermula
dari titik asal.

BAB 3 Pengaturcaraan Berasaskan Web 327
Tiga blok berasingan dari padangan “Browser Viewport”