Positionnement - noelno/dovelei GitHub Wiki

Schémas de positionnement

Flux normal (static)

Les éléments s'affichent les uns au dessus des autres, ou à côté dans le cas des éléments en ligne.

Relatif

Un élément relatif se positionne par-rapport à son emplacement normal dans le flux. Les éléments autour de lui se comportent comme s'il était toujours à la même place dans le flux.

Flottant

Une explication claire : https://la-cascade.io/comment-fonctionne-css-float/ Un récap' fait ici :

  • Un élément flottant est d'abord placé normalement dans le flux. Si un autre élément bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux.
  • Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
  • Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

Absolu

Un élément absolu se positionne par-rapport à l'emplacement du premier ancêtre en position relative, ou à défaut par-rapport à la page. Il est totalement retiré du flux et s'affiche au premier-plan, devant son conteneur. En cela il diffère de float, qui lui reste affiché sous ses frères qui le précèdent dans le DOM, et à côté de / dessus ceux qui le suivent.

Fixé

Un élément fixed se positionne par-rapport à la fenêtre du navigateur.
Disponible à partir de IE7. Pour les navigateurs plus anciens, recourir à la technique d'utiliser des sélécteurs ignorés par MSIE pour offrir un pitfall en absolute. Quelques navigateurs mobiles ne le prennent pas en charge, ou alors avec quelques comportements inattendus (cf. Can I Use)

Bonnes pratiques

Garder un maximum les éléments dans le flux, utilisez position en dernier recours. Utilisez en priorité :

  • les changements de mode de rendu pour gérer l'alignement des blocs
  • les marges internes et externes pour gérer l'espacement bloc-bloc et bloc-contenu

Eviter les déclarations inutiles type width: 100% sur vos blocs (par défaut un bloc prend toute la largeur disponible)

Eviter les imbrications de <div> inutiles

Résoudre un bug d'affichage

http://www.alsacreations.com/actu/lire/194-methodologie-pour-resoudre-les-problemes-daffichage-en-css.html

En bref :

Isoler l'élément problématique

  • en ajoutant une couleur de fond
  • en supprimant les éléments autour un par un pour repérer quel élément provoque un décalage
  • supprimer toutes les marges avec le sélécteur universel : * { margin: 0; padding: 0;}

Passer le code au validateur

pour vérifier que le modèle de contenu est respecté

Diagnostiquer le problème

Il peut venir de plusieurs sources :

  • non-respect du modèle de contenu d'un élément
  • non-respect du modèle de boîte pour chaque navigateur cible
  • cafouillage dans le choix du schéma de positionnement

Techniques de positionnement

(à venir : exemples en liens)

Centrer

  • Centrer un bloc horizontalement grâce à margin: 0 auto; (exemple)
  • Utiliser le modèle tabulaire pour centrer n'importe quel élément verticalement ET horizontalement (exemple)

Layout

  • Créer un menu restant visible même en scrollant grâce à l'attribut fixed
  • Créer un layout à plusieurs colonnes en combinant float ainsi que des largeurs et des marges déclarées en pourcentage [IE6]
  • Créer un layout à trois colonnes en combinant un positionnement absolu ainsi que des largeurs et des marges déclarées en pourcentage [IE6]
  • Faire en sorte que deux colonnes aient la même hauteur (non fixe) avec un élément vide (br, hr...) portant les propriétés clear: both et visibility: hidden [IE6]
  • Utiliser le modèle tabulaire pour intervertir la position de blocs (changement de rendu + media query) (exemple)

Mobile

  • Créer un tableau de données entièrement responsive, en plaçant en display:none sur certaines colonnes et changeant le rendu des cellules pour prendre moins de place (exemple)

Sources

⚠️ **GitHub.com Fallback** ⚠️