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>

 

---

12 novembre 2017 - Wakonda - CSS