Persiapan Pertama siapkan halaman dan gambar Anda, kami menggunakan gambar ini:
Kami cukup menulis HTML seperti ini:
| <div id="wadah"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </div> |
Gaya CSSnya mungkin terlihat seperti ini:
| body{background:#999;} #wadah{ lebar:960 piksel; latar belakang:#fff; margin:20px otomatis; bantalan:10 piksel; } |
Berikut ini adalah preview efeknya:
Atur ke posisi relatif. Saat kita memposisikan logo, kita ingin posisinya relatif terhadap wadah, jadi gunakan posisi relatif:
| #wadah{ lebar:960 piksel; latar belakang:#fff; margin:20px otomatis; bantalan:10 piksel; posisi:relatif; } |
Posisikan di luar kotak Sekarang yang perlu Anda lakukan hanyalah memposisikan logo, posisikan secara horizontal sehingga menonjol keluar dari wadahnya.
| #logo{ posisi:mutlak; kiri:-15 piksel; } |
Sekarang, kita dapat melihat bahwa logo tersebut ditampilkan di luar kotak.
