Positionnement - noelno/dovelei GitHub Wiki
Les éléments s'affichent les uns au dessus des autres, ou à côté dans le cas des éléments en ligne.
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.
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.
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.
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)
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
En bref :
- 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;}
pour vérifier que le modèle de contenu est respecté
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
(à venir : exemples en liens)
- 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)
- 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)
- 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)