La position absolue (position: absolute) permet de placer un élément sans que soit pris en compte l'ordre dans lequel les éléments HTML sont déclarés dans le code.
La position relative (position: relative) permet de placer un élément par rapport à une position de référence.
En CSS, il est possible de définir à partir de quel élément la position est absolue. Pour ce faire, il suffit de définir la propriété "position: relative" à l'élément parent à partir duquel on souhaite positionner notre élément absolu.
Dans l'exemple ci-dessous, on positionne un bouton en bas à gauche d'un div :
.container {
border: 1px solid #E9E3DD;
float: left;
height: 210px;
margin: 2px;
padding: 4px 2px 10px 10px;
text-align: left;
width: 117px;
position:relative;
}
#bottom_button {
position:absolute;
bottom:0;
left:0;
}
<div class="container">
<div id="bottom_button">
<input type="submit" value="Submit">
</div>
</div>
Publicité
