Preparación Primero prepare su página e imagen, usamos esta imagen:
Simplemente escribimos HTML así:
| <div id="contenedor"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </div> |
El estilo CSS podría verse así:
| body{background:#999;} #recipiente{ ancho: 960 px; fondo:#fff; margen: 20px automático; relleno: 10px; } |
La siguiente es una vista previa del efecto:
Establecer en posicionamiento relativo Cuando posicionamos el logotipo, queremos que su posición sea relativa al contenedor, así que use el posicionamiento relativo:
| #recipiente{ ancho: 960 px; fondo:#fff; margen: 20px automático; relleno: 10px; posición: relativa; } |
Colócalo fuera de la caja. Ahora solo te falta posicionar el logo, posicionándolo horizontalmente para que sobresalga del contenedor.
| #logo{ posición:absoluta; izquierda: -15px; } |
Ahora podemos ver que el logotipo se muestra fuera del cuadro.
