Utilisation de XHTML et des CSS
Positionnement
Explications
Nous avons vu précédemment qu'il existait deux types de balises
- Les balises en ligne
- Les balises bloc
Ces balises se positionnent automatiquement les unes par rapport aux autres selon leur type et leur ordre d'arrivée dans le code
Grâce aux CSS il est possible positionner à notre guise ces éléments soit en les laissant dans l'ordre naturel (le flux) soit en les sortant du flux. Pour cela il faut utiliser certaines propriétés que nous allons énoncer plus bas.
Pour bien appréhender cette notion de positionnement il faut tout d'abord comprendre la notion de hiérarchie des balises. Certaines balises peuvent contenir d'autres balises. Par exemple :
<div>
<p>Ceci est un texte</p>
<span>Un autre texte</span>
</div>
Dans cet exemple la balise div est un élément père par rapport à la balise p. P est donc un enfant de div. De plus l'élément span est un élément frère de p
Positionnement dans le flux courant
Il s'agit du cas classique de positionnement ou tout élément est placé sur la page en fonction de ses frères et de son conteneur père.
Positionnement relatif
Dans ce cas de positionnement relatif, l'élément positionné reste dans le flux courant mais il est possible de le décaler en utilisant les propriétés : left, top , right, bottom. Ce genre de positionnement peut entraîner des chevauchements d'éléments il faudra donc dans certains cas faire appel à la propriété z-index que l'on détaillera plus bas.
Exemple de code HTML :
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte</p>
</div>
Code CSS associé :
div{
width:300px;
padding-top:10px;
background:yellow;
}
p#premier{
margin-bottom: 0;
margin-top: 0;
margin-left: 3em;
width:100px;
background:orange;
}
p#second{
position:relative;
left:20px;
bottom:15px;
margin-top: 0;
margin-left: 3em;
width:150px;
height:50px;
background:blue;
}
On obtient au final le résultat suivant

Positionnement absolu
Le positionnement absolu retire l'élément du flux courant, on peut ainsi le positionner à n'importe quel endroit sans tenir compte de l'ordre d'arrivée de l'élément dans le code. La position d'un tel élément est calculée par rapport à celle de son parent le plus proche qui est lui même positionné (en relatif ou en absolu). Si aucun élément père n'est positionné alors la position de notre élément sera calculée par rapport à l'élément body qui représentera la fenêtre du navigateur.
Exemple de code HTML
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte</p>
</div>
Code CSS associé :
div{
width:300px;
height:200px;
margin-left:15px;
margin-top:15px;
background:yellow;
}
p#premier{
width:100px;
background:orange;
}
p#second{
position:absolute;
top:0;
left:0;
width:150px;
height:50px;
background:blue;
margin:0;
}
On obtient au final le résultat suivant

On observe sur ce résultat que l'élément en bleu sort de son conteneur d'origine, pour le garder à l'intérieur de son conteneur il suffit de positionner ce conteneur (ici le bloc div) de la façon suivante (ceci est un exemple) :
div{
position:relative;
width:300px;
height:200px;
background:yellow;
}

Positionnement fixe
Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n'a aucun effet sur un contenu en position fixe.
Le positionnement fixe n'étant pas reconnu par Internet Explorer, un positionnement absolu doit s'y substituer dans ce navigateur. Nous verrons ces méthodes dans une autre partie.
Propriété z-index
Nous avons vu précédemment que certains éléments pouvaient se chevaucher. Afin de pouvoir contrôler ce comportement il existe la propriété z-index. Si deux éléments doivent se chevaucher alors celui qui aura la valeur de la propriété z-index la plus haute sera affiché au dessus.
Voici un exemple :
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte</p>
</div>
Le code CSS associé
div{
position:relative;
width:300px;
height:200px;
background:yellow;
}
p#premier{
position:absolute;
top:0;
left:0;
width:100px;
background:orange;
z-index:10;
}
p#second{
position:absolute;
top:40px;
left:50px;
z-index: 0;
width:150px;
background:blue;
z-index:0;
}

On voit clairement que le premier paragraphe (en orange) est positionné au dessus de l'autre paragraphe du fait de sa valeur z-index plus élevée
Positionnement flottant
Le positionnement flottant va sortir l'élément concerné du flux courant, ensuite cet élément sera placé le plus à gauche ou le plus à droite possible de son conteneur (selon la propriété utilisée : float:right ou float:left)
Voici un exemple :
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte</p>
</div>
Le CSS associé
div{
width:300px;
height:200px;
background:yellow;
}
p#premier{
float:right;
width:100px;
background:orange;
}
p#second{
background:blue;
}

Ce positionnement est souvent utilisé pour mettre deux éléments côte à côte. Cependant parfois un élément peut déborder de son conteneur, pour corriger ce comportement on peut utiliser une "astuce" qui consiste à placer une barre verticale (hr) sous les éléments positionnés en float.
Voici le cas typique de débordement :
<div>
<p id="premier">premier paragraphe de texte</p>
<p id="second">deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de text</p>
</div>
Le CSS associé
div{
width:300px;
height:200px;
background:yellow;
}
p#premier{
float:left;
width:100px;
background:orange;
}
p#second{
float:left;
width:150px;
background:blue;
}

Comme expliqué plus tôt nous allons placer une balise hr après le deuxième paragraphe. Nous allons lui appliquer une propriété spéciale (clear) qui aura pour valeur "both". Cette propriété permettra d'étirer le conteneur afin que l'effet de débordement disparaisse. Il suffira ensuite de cacher cette barre verticale avec la propriété visibility : hidden.
Voici le code CSS de la balise hr
hr{
clear:both;
visibility:hidden;
}

Quel positionnement choisir ?
Le positionnement naturel (en flux) des éléments est à préférer dans tout les cas et autant que possible (surtout pour les contenus). Le flux naturel permet d'éviter le plus grand nombre d'incompatibilités et de problèmes de mise en page.
Il ne faut se tourner vers les autres cas que lorsque le positionnement en flux n'est pas réalisable (éléments côte à côte, etc.) ou pour les grandes zones de la page. A noter que les principaux bugs ou mauvaises interprétations des navigateurs ont lieu sur ces positionnements hors-flux.