WebPetit

La propriété CSS position permet de gérer la postion des blocs d’éléments sur lesquels elle est appliquée.

#mon_identifiant {
postion:relative;
}

Elle permet de positionner un bloc d’élément selon les bordures de la page, ou selon le bloc d’élément auquel il appartient.
Les valeurs possibles sont:

• static: valeur par défaut. left, top, right et bottom ne s'y appliquent pas.
• relative: positionnement se fera par rapport à l'endroit où l'élément à été déclaré dans le code HTML(dans un div par exemple).
• absolute, positionnement se fera par rapport au coin haut gauche de la page HTML

Exemple :

CSS

#bloc{
border:1px solid chocolate;
width:400px;
height:250px;
background-color:chocolate;
}

#inside{
float:right;
position:relative;
border:1px solid green;
width:300px;
margin:10px 10px;
background-color:green;
color:white;
}

HTML

<div id="bloc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

<div id="inside">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>
</div>