23. Positions dans le flux et relative
Le positionnement dans le flux courant
• Pour déplacer un bloc dans son conteneur, il suffit d’utiliser les propriétés déjà connues : margin et padding.
• Les éléments de type bloc de succèdent verticalement. Les blocs occupent toute la largeur disponible dans leur conteneur.
• Les éléments en ligne se suivent sur la même ligne. Quand il n’y a plus de place dans le conteneur, un retour à la ligne s’effectue.
• La hauteur du conteneur sera déterminée par celle de son contenu.
Le positionnement relatif• Les éléments de type bloc de succèdent verticalement. Les blocs occupent toute la largeur disponible dans leur conteneur.
• Les éléments en ligne se suivent sur la même ligne. Quand il n’y a plus de place dans le conteneur, un retour à la ligne s’effectue.
• La hauteur du conteneur sera déterminée par celle de son contenu.
• Variante du positionnement dans le flux; permet de superposer des éléments frères en procédant à des décalages.
• S’active par la déclaration position: relative;
• L’élément concerné est alors « positionné » et prend d’abord sa place dans le flux courant. Il peut ensuite s’en décaler à l’aide des propriétés top, right, bottom et left.
• Un élément « positionné » (ici, en relatif) présente des intérêts pour les positionnements absolu et fixe. Cela lui permet de devenir conteneur d’autres éléments de contenu positionnés.
• S’active par la déclaration position: relative;
• L’élément concerné est alors « positionné » et prend d’abord sa place dans le flux courant. Il peut ensuite s’en décaler à l’aide des propriétés top, right, bottom et left.
• Un élément « positionné » (ici, en relatif) présente des intérêts pour les positionnements absolu et fixe. Cela lui permet de devenir conteneur d’autres éléments de contenu positionnés.
Publicité