Différents types de Positionnement
Le positionnement dans le flux
Paragraphe non dimensionné qui occupe toute la largeurs de "corps" (width:800px)
Paragraphe dimensionné à (width:400px) et simplement séparé du paragraphe précédent par des sauts de ligne.
Paragraphe class:p1 dimensionné à une largeur de 400 px width:400px et une hauteur de height:110px; on lui a attribué une marge supérieure de 30 px margin-top:30px et une marge gauche de 110px margin-left:110px
Paragraphe class:p2 dimensionné à une largeur de 400 px width:400px et une hauteur de height:110px; on lui a attribué une marge supérieure de 30 px margin-top:30px et une marge gauche de 110px margin-left:200px
Le positionnement Relatif
Paragraphe class:p1 dimensionné à une largeur de 400 pxwidth:400px et une hauteur de height:110px; on lui a attribué une marge supérieure de 30 px margin-top:30px et une marge gauche de 110px margin-left:110px
Paragraphe class:p2 modifié par l'attribution de la propriété position:relative, et par rapport à sa position précédente, par un décalage à gauche de 150 px (left:150px) et un décalage supérieur de 50 px (top:50px) .
Le positionnement absolu
Paragraphe auquel j'ai appliqué la class p1
largeur 400 px, hauteur 110
px
arrière-plan vert clair
marge haute 30 px
marge gauche 100 px
Paragraphe p3 ayant la propriété position:absolute avec des décalages top:250px et left:350px. div #PosAbs englobant p1 et p3 de ce paragraphe, ayant la propriété position:absolute, nous constatons que p3 se positionne par rapport à l'angle haut et gauche de la div id="PosAbs"
Le positionnement fixé
Ce positionnement sert pour les en têtes ou les menus.Sur cette page nous avons appliqué
- au div id #Entete la propriété position:fixed; top:0;
- au div id #Conteneur la propriété padding-top:70px;