Le positionnement est un problème permanent en de chaque mise en page. Par défaut, le HTML affiche les éléments dans leur ordre successif. Arriver à les placer dans une continuité sans faute mais dans le même temps riche en mise en page n'est pas toujours évident. L'un des cas les plus flagrant de cette difficulté consiste dans le fait de placer des éléments de parties de site côte à côte.
Globalement un positionnement nécessite deux choses :
On peut aussi régulièrement utiliser des propriétés de marges pour affiner des placements, directement au niveau du contenu. Mais il en faudrait dans le principe pas trop abuser de ces méthodes détournées.
Enfin, puisque nous sommes dans un monde numérique et interactif, il sera dans certains possible de définir des positionnements moins contraints qui s'adapteront à des contextes et qui vient contrecarrer les deux points mentionnés plus haut.
Le positionnement se fait toujours par rapport à un côté de référence. Ils peuvent être :
Dans la pratique, top et left seront les plus utilisés.
La propriété position permet en cas de besoin de modifier l'élément référent. Elle accepte trois valeurs principales :
Le positionnement relatif permet de laisser un élément dans le flux général du contenu mais d'engendrer des décalages. Ainsi toute position sera dessinée à partir de l'élément précédent.
Le positionnement absolu se fait par rapport à l'angle supérieur gauche de la page web pour les éléments de niveau principal ou de l'élément parent. Cette méthode autrefois très utilisée n'est pas à recommander pour des raisons d'adaptation de la mise en page à différents supports.
Il permet cependant de placer n'importe quel élément de la page à un endroit précis quelque soit son positionnement dans le flux du contenu, et même indépendamment à cela.
Le positionnement fixé permet de positionner un élément de manière à ce qu'il est une position permanente dans la fenêtre de navigateur, quel que soit la taille de la fenêtre.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.