Préparation Préparez d’abord votre page et votre image, nous utilisons cette image :
Nous écrivons simplement du HTML comme ceci :
 |
Le style CSS pourrait ressembler à ceci :
| body{background:#999;} #récipient{ largeur : 960 px ; arrière-plan :#fff ; marge : 20 px automatique ; remplissage : 10 px ; } |
Ce qui suit est un aperçu de l'effet :
Définir sur le positionnement relatif Lorsque nous positionnons le logo, nous voulons que sa position soit relative au conteneur, utilisez donc le positionnement relatif :
| #récipient{ largeur : 960 px ; arrière-plan :#fff ; marge : 20 px automatique ; remplissage : 10 px ; position : relative ; } |
Positionnez-le en dehors de la boîte Il ne vous reste plus qu'à positionner le logo, en le positionnant horizontalement pour qu'il dépasse du conteneur.
| #logo{ position : absolue ; gauche : -15px ; } |
Maintenant, nous pouvons voir que le logo est affiché en dehors de la boîte.
