|

La propriété Position

Cette propriété contrôle la position d'un élément au sein d'un document HTML.

Suite au réglage de cette propriété, il devient possible de positionner précisément n'importe quel élément HTML par les propriétés de positionnement (top, left, bottom et right).

position
Valeur	static relative absolute fixed
Type	CSS 2
Compatibilité	5+ (sauf fixed) 7+ 4+ 3+ 9+
Valeur par défaut	static
Domaine d'application	Tous les éléments mais ne générant pas de contenu
Héritage	non
Media	Visuel

Exemples

Code HTML pour les exemples :

<div class="body">Fenêtre
	<div class="div">Boîte</div>
</div>

Positionnement absolu de l'élément.

.body {
	position: relative;
	width: 100%;
	height: 150px;
	background: cyan;
}
.div {
	position: absolute;
	top: 80px;
	right: 20px;
	width: 20%;
	height: 90px;
	background: yellow;
}

Positionnement relatif de l'élément.

.body {
	position: relative;
	width: 100%;
	height: 150px;
	background: cyan;
}
.div {
	position: relative;
	width: 20%;
	height: 90px;
	background: yellow;
}

|