การเตรียมการ ขั้นแรกเตรียมหน้าและรูปภาพของคุณ เราใช้รูปภาพนี้:
เราเพียงแค่เขียน HTML ดังนี้:
| <div id="คอนเทนเนอร์"> <img id="logo" src="logo.png" alt="ลี มันโร" /> </div> |
สไตล์ CSS อาจมีลักษณะดังนี้:
| body{พื้นหลัง:#999;} #คอนเทนเนอร์{ ความกว้าง:960px; พื้นหลัง:#fff; ระยะขอบ:20px อัตโนมัติ; ช่องว่างภายใน:10px; } |
ต่อไปนี้เป็นตัวอย่างของเอฟเฟกต์:
ตั้งค่าเป็นการวางตำแหน่งที่สัมพันธ์กัน เมื่อเราวางตำแหน่งโลโก้ เราต้องการให้ตำแหน่งของโลโก้สัมพันธ์กับคอนเทนเนอร์ ดังนั้นให้ใช้การวางตำแหน่งที่สัมพันธ์กัน:
| #คอนเทนเนอร์{ ความกว้าง:960px; พื้นหลัง:#fff; ระยะขอบ:20px อัตโนมัติ; ช่องว่างภายใน:10px; ตำแหน่ง:ญาติ; } |
วางตำแหน่งไว้นอกกล่อง ตอนนี้สิ่งที่คุณต้องทำคือวางตำแหน่งโลโก้ วางตำแหน่งในแนวนอนเพื่อให้โลโก้ยื่นออกมาจากคอนเทนเนอร์
| #โลโก้{ ตำแหน่ง:แน่นอน; ซ้าย:-15px; } |
ตอนนี้เราจะเห็นว่าโลโก้แสดงอยู่นอกกรอบ
