TD 3 : Le flux relatif
Explication
Le positionnement relatif est une forme de positionnement qui laisse l'élément dans le flux normal (donc dépendant et influençant des autres éléments contenu dans le bloc conteneur), tout en le décalant à l'aide des propriétés "top" et "left"... mais en ayant l'avantage des éléments dits "positionnés" à savoir qu'il peut servir de bloc conteneur pour des éléments hors-flux (position absolue par exemple). Retenons que le positionnement relatif est principalement employé pour appliquer un décalage d'un élément par rapport à sa position "normale".
Application
Enoncé : Pour illustrer ce mode de positionnement, on va créer un bloc conteneur où l'on va placer un contenu texte et un bloc A, appelé bloc relatif. Pour positionner cette boîte on va définir des propriétés de décalages avec margin-top et left.
Partie HTML :
<BODY>
<div class="conteneur">
<div class="bloc_relatif">
Bloc A
</div>
css css css css...
</div>
</BODY>
Et la CSS correspondante :
.conteneur {
width:800px;
border:1px solid black;
}
.bloc_relatif {
position:relative;
width:300px;
margin-top:20px;
margin-left:30px;
border:1px solid black;
}
Remarque : On constater alors, que dès que le décalage est effectué, le contenu suivant (ici du texte) ne sera pas chevauché par le bloc car il est décalé également vers le bas pour laisser l'espace au bloc.
Retour au plan du TD