Sites


CSS3

Positionner un élément

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 :

  • définir l'élément par rapport auquel le positionnement va être fait. Lorsque l'on fait de la géométrie, on dessine deux axes sur le papier millimétré et le croisement des deux place le point 0,0 qui est l'origine de tout les calculs de positionnement dans la page. Les navigateurs ont donc aussi implémentés des principes prédéfinis pour harmoniser les pratiques;
  • définir la position réelle de l'objet par rapport à ce point de référence. Cette position se définit en général par deux valeurs ressemblant aux x et y de la géométrie cartésienne.

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.

Définir la position

Le positionnement se fait toujours par rapport à un côté de référence. Ils peuvent être :

  • haut : top
  • droite : right
  • bas : bottom
  • gauche : left

Dans la pratique, top et left seront les plus utilisés.

Définir l'élément référent

La propriété position permet en cas de besoin de modifier l'élément référent. Elle accepte trois valeurs principales :

  • absolute
  • relative
  • fixed
  • ou son inverse float.

Positionnement relatif

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.

Positionnement absolu

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.

Positionnement fixé

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.