Vorbereitung Bereiten Sie zunächst Ihre Seite und Ihr Bild vor. Wir verwenden dieses Bild:
Wir schreiben HTML einfach so:
 |
Der CSS-Stil könnte so aussehen:
| body{background:#999;} #Container{ Breite:960px; Hintergrund:#fff; Rand: 20 Pixel automatisch; Polsterung:10px; } |
Das Folgende ist eine Vorschau des Effekts:
Stellen Sie die relative Positionierung ein. Wenn wir das Logo positionieren, möchten wir, dass seine Position relativ zum Container ist. Verwenden Sie daher die relative Positionierung:
| #Container{ Breite:960px; Hintergrund:#fff; Rand: 20 Pixel automatisch; Polsterung:10px; Position:relativ; } |
Positionieren Sie es außerhalb der Box. Jetzt müssen Sie nur noch das Logo positionieren, und zwar horizontal, sodass es aus dem Container herausragt.
| #Logo{ Position:absolut; links:-15px; } |
Jetzt können wir sehen, dass das Logo außerhalb des Rahmens angezeigt wird.
