51
Vue d’ensemble du modèle de formatage visuel
lue.peut.être.décalée.par.rapport.au.haut,.au.bas,.à.la.gauche.ou.à.la.droite.de.son.bloc.conteneur..Vous.disposez.ainsi.d’une.grande.flexibilité.de.positionnement,.qui.permet.de.placer.
l’élément.presque.n’importe.où.dans.la.page.
Le principal problème que les utilisateurs rencontrent avec le positionnement consiste à se rappeler à
quoi correspond chaque option. Le positionnement relatif est "relatif" à la position initiale de l’élément
dans le flot du document, alors que le positionnement absolu est "relatif" au plus proche ancêtre positionné ou, s’il n’existe pas, au bloc conteneur initial.
vent.chevaucher.d’autres.éléments.dans.la.page..Vous.pouvez.en.contrôler.l’ordre.d’empilement.en.paramétrant.une.propriété.appelée.z-index..Plus.le.rang.z-index.est.élevé,.plus.la.
boîte.apparaît.haut.dans.la.pile..
Le.positionnement.absolu.d’un.élément.par.rapport.à.son.plus.proche.ancêtre.positionné.
offre. d’intéressantes. options. pour. la. mise. en. page.. Supposons. ainsi. que. vous. souhaitiez.
aligner.un.paragraphe.de.texte.en.bas.à.droite.d’une.grande.boîte..Vous.pouvez.donner.à.la.
boîte.conteneur.une.position.relative,.puis.positionner.de.manière.absolue.le.paragraphe.par.
rapport.à.cette.boîte :
#branding {
width: 70em;
height: 10em;
position: relative;
}
#branding .tel {
position: absolute;
right: 1em;
bottom: 1em;
text-align: right;
}
Le positionnement absolu d’une boîte par rapport à un ancêtre au positionnement relatif fonctionne
bien dans la plupart des navigateurs modernes. Internet Explorer 5.5 et 6 sous Windows sont cependant victimes d’un bogue. Si vous tentez de positionner absolument la boîte par rapport à la
droite ou au bas de son ancêtre positionné de manière relative, vous devez vous assurer que les
dimensions de l’ancêtre sont bien spécifiées. Sans cela, Internet Explorer positionne, à tort, la boîte
par rapport au support du document. Nous reviendrons sur les correctifs à ce bogue au Chapitre 9.
La solution la plus simple consiste à définir la largeur et la hauteur de la boîte relative pour éviter ce
problème.
Vue d’ensemble du modèle de formatage visuel
lue.peut.être.décalée.par.rapport.au.haut,.au.bas,.à.la.gauche.ou.à.la.droite.de.son.bloc.conteneur..Vous.disposez.ainsi.d’une.grande.flexibilité.de.positionnement,.qui.permet.de.placer.
l’élément.presque.n’importe.où.dans.la.page.
Le principal problème que les utilisateurs rencontrent avec le positionnement consiste à se rappeler à
quoi correspond chaque option. Le positionnement relatif est "relatif" à la position initiale de l’élément
dans le flot du document, alors que le positionnement absolu est "relatif" au plus proche ancêtre positionné ou, s’il n’existe pas, au bloc conteneur initial.
vent.chevaucher.d’autres.éléments.dans.la.page..Vous.pouvez.en.contrôler.l’ordre.d’empilement.en.paramétrant.une.propriété.appelée.z-index..Plus.le.rang.z-index.est.élevé,.plus.la.
boîte.apparaît.haut.dans.la.pile..
Le.positionnement.absolu.d’un.élément.par.rapport.à.son.plus.proche.ancêtre.positionné.
offre. d’intéressantes. options. pour. la. mise. en. page.. Supposons. ainsi. que. vous. souhaitiez.
aligner.un.paragraphe.de.texte.en.bas.à.droite.d’une.grande.boîte..Vous.pouvez.donner.à.la.
boîte.conteneur.une.position.relative,.puis.positionner.de.manière.absolue.le.paragraphe.par.
rapport.à.cette.boîte :
#branding {
width: 70em;
height: 10em;
position: relative;
}
#branding .tel {
position: absolute;
right: 1em;
bottom: 1em;
text-align: right;
}
Tel: 0845 838 6163
Le positionnement absolu d’une boîte par rapport à un ancêtre au positionnement relatif fonctionne
bien dans la plupart des navigateurs modernes. Internet Explorer 5.5 et 6 sous Windows sont cependant victimes d’un bogue. Si vous tentez de positionner absolument la boîte par rapport à la
droite ou au bas de son ancêtre positionné de manière relative, vous devez vous assurer que les
dimensions de l’ancêtre sont bien spécifiées. Sans cela, Internet Explorer positionne, à tort, la boîte
par rapport au support du document. Nous reviendrons sur les correctifs à ce bogue au Chapitre 9.
La solution la plus simple consiste à définir la largeur et la hauteur de la boîte relative pour éviter ce
problème.