Team-Masters.com
Que du Gratuit pour Webmasters
Positionner des blocs en absolu en CSS
Comment affiner des mises en page en utilisant la déclaration CSS position : absolute.
Après avoir vu les notions de flux normal, et le positionnement d’un élément en relatif, voyons maintenant qu’il existe une autre façon d’affiner la position d’un bloc avec un positionnement absolu. Pour positionner un élément en absolu à l’aide des CSS, il faut activer celui-ci à l’aide de la déclaration "position : absolute".
Comme en positionnement relatif, l’élément ainsi activé par cette déclaration sort du flux normal et est dit « positionné ».
En positionnement absolu, les boîtes ainsi retirées du flux normal n’ont plus aucun effet sur le calcul du placement des autres boîtes de la même fratrie. Ainsi, à l’inverse du positionnement relatif, le positionnement en absolu ne laisse pas la place réservée laissée libre par le bloc sorti du flux.
Pour positionner un bloc en absolu il faut que sa place soit définie par rapport à un bloc de référence. On utilise, comme en positionnement relatif les mots clés left, top, right et bottom. La position de base est alors calculée par rapport à un bloc conteneur et non pas en décalage de la position théorique qu’il occuperait dans le flux normal. Le bloc conteneur de référence est celui du premier élément ancêtre positionné (en relatif, fixe, ou absolu). S’il n’y en a pas, on remonte si besoin jusqu’à la fenêtre du navigateur.
En clair, un élément positionné en absolu sera placé par rapport à son parent si celui-ci est lui-même positionné, et sinon par rapport au premier ancêtre positionné, en remontant au besoin jusqu’à la fenêtre du navigateur.
Par exemple, si on définit le code CSS suivant :
div {
font-size: 15px;
font-weight: bold;
text-align: center;
border: thin solid blue;
}
.premier {
background-color: yellow;
position: absolute;
left: 100px;
top: 50px;
width: 300px;
height: 300px;
border: 0;
}
.second {
background-color: teal;
position: absolute;
left: 75px;
top: 25px;
width: 100px;
height: 120px;
border: 1px solid red;
color: white;
}Avec le code HTML qui suit :
<div class="premier">Bloc de Référence
<div class="second">Le second bloc</div>
</div>
Ici, le premier div n’ayant pas d’ancêtre, il sera situé à 100px du bord gauche de la fenêtre du navigateur et à 50px de son côté supérieur. Le second div étant imbriqué dans le premier (lui même positionné), il va alors se positionner par rapport à son bloc père : son bord gauche sera situé à 75px du bord gauche du premier div et son côté haut à 25px du bord supérieur du premier div. Vous voyez à travers cet exemple comment positionner des blocs. Grâce aux CSS, et à la propriété position des blocs, une multitude de combinaisons est alors possible, y compris l’empilement de blocs eux-mêmes.
Regardons encore un autre exemple HTML :
<div>
<p id="first">Un premier paragraphe de texte</p>
<p id="second">Un deuxième paragraphe</p>
</div>Avec pour code CSS :
div {
width: 270px;
height: 70px;
background: yellow;
}
p#first {
width: 150px;
background: red;
}
p#second {
width; 170px;
background: green;
}Jusque-là rien d’extraordinaire, tous les éléments apparaissent dans le flux courant, avec deux paragraphes qui s’affichent l’un au-dessous de l’autre contenus dans un bloc parent div :
Un premier paragraphe de texte
Un deuxième paragraphe
p#second {
position: absolute;
top: 0;
right: 0;
width; 170px;
background: green;
}Que va-t-il se passer ? Le second paragraphe va-t-il se positionner par rapport à son conteneur père div jaune ou par rapport à la fenêtre du navigateur ? Il va aller se positionner en haut à droite par rapport à la fenêtre du navigateur, en sortant carrément de son bloc père. En effet, son parent direct, le conteneur div jaune n’étant pas lui-même positionné, le second paragraphe prendra pour bloc de référence le premier ancêtre positionné, quite à remonter jusqu’à la fenêtre du navigateur. C’est ce qu’il a fait. C’est OK ?
Si on voulait positionner en absolu le second paragraphe pour qu’il vienne se positionner par rapport à son bloc père div jaune, il faudrait alors positionner celui-ci par une déclaration position : relative, comme ceci :
div {
position: relative;
width: 270px;
height: 70px;
background: yellow;
}Ce qui donne :
Un premier paragraphe de texte
Un deuxième paragraphe
Enfin, il faut savoir que tout élément positionné en absolu est considéré de type bloc : des éléments en ligne ainsi positionnés peuvent alors recevoir des dimensions. D’autre part, les propriétés top, left, right ou bottom n’ont de sens que quand elles s’appliquent à des éléments positionnés : ces propriété n’auront aucun effet sur des éléments placés dans le flux courant ou en flottant.
Allons encore plus loin avec le recouvrement de blocs.
18 février 2005
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
