Preparação Primeiro prepare sua página e imagem, usamos esta imagem:
Simplesmente escrevemos HTML assim:
| <div id="contêiner"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </div> |
O estilo CSS pode ser assim:
| body{background:#999;} #recipiente{ largura:960px; plano de fundo:#fff; margem:20px automático; preenchimento: 10px; } |
A seguir está uma prévia do efeito:
Defina o posicionamento relativo Quando posicionamos o logotipo, queremos que sua posição seja relativa ao contêiner, então use o posicionamento relativo:
| #recipiente{ largura:960px; plano de fundo:#fff; margem:20px automático; preenchimento: 10px; posição:relativo; } |
Posicione-o fora da caixa Agora tudo o que você precisa fazer é posicionar o logotipo, posicionando-o horizontalmente para que fique saliente do contêiner.
| #logotipo{ posição:absoluta; esquerda:-15px; } |
Agora podemos ver que o logotipo é exibido fora da caixa.
