C'est le mode de positionnement par défaut. Les élements apparaissent dans l'odre correspondant au document HTML.
Les éléments de type bloc provoquent un retour à la ligne et ont par défaut une largeur de 100%. Les espacements entre les blocs dépend des propriétés margin et padding
Les éléments de type en ligne coulent dans les éléments de type bloc.
Le positionnement relatif est introduit par la propriété position avec la valeur relative
Ce positionnement permet de décaler la position du bloc en utilisant les propriétés top, right, bottom, left
Ce positionnement ne provoque pas de décalage sur les éléments frères et ne présente pas d'intérê en soi ; son utilité principale est de "positionner" un élément pour y placer d'autres éléments. Par exemple il est possible de positionner des éléments en positionnement absolu dans un bloc en positionnement relatif (sans le positionnement relatif, les éléments en positionnement absolu se positionneraient par rapport au parent positionné le plus proche, généralement la page).
Exemple :
<div id="global"> <div id="contenu">Lorem ipsum nullam melius imperdiet cu duo. </div> </div>
Style css :
#global{
width:20em;
height:10em;
background-color:navy;
}
#contenu{
position:relative;
width:10em;
left:5em;
top:1em;
background-color:silver;
}
Rendu à l'affichage :
Le positionnement absolu est introduit par la propriété position avec la valeur absolute
Ce positionnement fait sortir l'élément du flux et celui-ci se positionne en utilisant les propriétés top, right, bottom, left. L'élément en absolu se positionne par rapport à son parent positionnée le plus proche, qui est en général body.
Il est surtout utilisé comme une technique pour définir les grandes zones dans la page.
Exemple :
<div id="global"> <div id="contenu">Lorem ipsum nullam melius imperdiet cu duo. </div> </div>
Style css :
#global{
position:relative;
width:20em;
height:10em;
background-color:navy;
}
#contenu{
position:absolute;
width:6em;
height:10em;
left:0;
top:0;
background-color:silver;
}
Rendu à l'affichage :
Le positionnement flottant est introduit par la propriété float avec la valeur right ou left
Ce positionnement fait sortir l'élément du flux. Les éléments qui le suivent l'entourent et sa valeur indique à quel endroit se positionne cet élément.
L'utilisation de la propriété float induit parfois celle de la propriété clear. La propriété clear permet d'éviter qu'un élément se mette à coté de l'élément flottant précédent.
Le positionnement flottant est très utilisé pour placer des images, des encadrés ou pour définir les grandes zones dans la page.
Exemple :
<div id="global"> <div id="contenu1">Lorem ipsum nullam melius imperdiet cu duo. </div> <div id="contenu2">Lorem ipsum nullam melius imperdiet cu duo. </div> <div id="contenu3">Lorem ipsum nullam melius imperdiet cu duo. </div> </div>
Style css :
#global{
width:40em;
background-color:orange;
}
#contenu1{
float:left;
width:10em;
height:4em;
background-color:silver;
}
#contenu2{
float:right;
width:10em;
height:2em;
background-color:white;
}
#contenu3{
clear:both;
float:right;
width:8em;
height:3em;
background-color:gray;
}
Rendu à l'affichage :
Le positionnement fixe est introduit par la propriété position avec la valeur fixed
Ce positionnement fait sortir l'élément du flux et celui-ci se positionne par rapport aux bords de la page mais ne défile pas avec la page.
Sa positionne est définie en utilisant les propriétés top, right, bottom, left
Quasiment inutilisé, ce positionnement est incompatible avec Internet Explorer 6- (mais compatible avec la version 7).