»positionnement d'une boîte
Le navigateur traite la page, affiche les boîtes, en parcourant la page de haut en bas et de droite à gauche. Il réserve donc l'espace d'un bloc ou d'une balise en ligne selon l'élément HTML à afficher. Les propriétés positions et float vont permettre de modifier le comportement du navigateur.
flux normal
C'est le comportement d'affichage par défaut du navigateur (décrit dans la section display): c'est un traitement linéaire du contenu de la page. L'alignement des boîtes bloc est vertical ; l'alignement des éléments en-ligne dans les boîtes bloc est horizontal.
position relative
Le positionnement relatif (postion: relative;) permet d'inscrire l'élément auquel il est appliqué, dans le flux normal et de le décaler par rapport à sa position initiale.
<style>
.decale{
postion: relative;
top: 13px;
background: navy;
}
</style>
<p>un texte avec <span class="decale">une partie décalée</span> suivi de texte <br />
un peu long un peu long un peu long un peu long un peu long</p> donnera le rendu suivant à l'affichage
un texte avec une partie décalée suivi de texte
un peu long un peu long un peu long un peu long un peu long
Le risque avec cette méthode est, comme vous le constater, le chevauchement!
position absolue & fixe
Le positionnement absolue (position: absolute) permet de positionner un élément n'importe où dans la page. Si un élément faisant parti du flux normal est positionné au même endroit, l'élément en absolue sera affiché par dessus. Il faudra alors jouer avec les marges internes et exetrnes du bloc caché, pour qu'il ne le soit plus.
position float
Le positionnement float (float: left; ou float: right;) ne s'inscrit pas dans le flux HTML normal. L'élément auquel il est appliqué est alors décalé le plus possible, selon la place disponible dans la boîte dans laquelle il est contenu, vers la gauche ou vers la droite. Les éléments mitoyens s'organisent le long de l'élément flottant:
<p>
un paragraphe coupé par
<p style="float: left; background:green;">un praragraphe flottant</p>
s'affiche dans le flux normal, alors que le paragraphe flottant non.
Parcontre tout ce qui suit est bien organisé tout autour de l'élément flottant.
Le flux reprend d'ailleurs son cours normal dés que l'éléement flottant a été dépassé.
</p>
donnera le rendu suivant à l'affichage
un paragraphe coupé par
un praragraphe flottant
s'affiche dans le flux normal, alors que le paragraphe flottant non. Parcontre tout ce qui suit est bien organisé tout autour de l'élément flottant. Le flux reprend d'ailleurs son cours normal dés que l'éléement flottant a été dépassé.
cette propriété est fondamentale pour la mise en forme tableless (sans utiliser les tableaux), pour une explication plus détaillée je vous invite donc à consulter : http://openweb.eu.org/articles/initiation_float/
