Notions de flux et de positionnements en CSS

oct
7
2008

Petit atelier pratique sur les CSS issu d’un atelier proposé par Raphaël Goetter AlsacréationS - OpenWeb & Pascale Lambert-Charreteur - CSS Débutant - OpenWeb. Merci à eux pour la clarté de l’exposé…

Le Flux est le positionnement par défaut des éléments HTML

• L’ordre qui s’applique est celui du code html, c’est le flux courant
• Le Rendu peut se faire :
  • en bloc

    1 2	<p>&nsbp;</p> <li>&nsbp;</li>

  • « en-ligne » inline

    1 2	<strong></strong> <em></em>

Gérer le positionnement dans le flux

• Les éléments s’imbriquent, ce qui conduit à la mise en place de notions d’”Ancêtre“, de “Parent“, d’”Enfant“, de “Frère“.
• Tout élément recevant la propriété “position:” est dit “positionné“.
• On peut dès lors appliquer des propriétés comme margin ou padding.

Le positionnement absolu est une forme de positionnement hors du Flux

• Règle CSS : position : absolute;.
• Position dans le flux : l’élément sort du flux et se positionne par rapport au dernier « ancêtre » non positionné (c’est à dire dans le flux courant).
• On peut dès lors appliquer des propriétés de positionnement tels que top, right, bottom et left.
• Et la superposition est possible.

Le positionnement fixé est une forme de positionnement hors du Flux

• Règle CSS :

  1	position : fixed;

• Position dans le flux : l’élément sort du flux.
• Spécificité : reste fixe à l’écran, sans aucune possibilité de scroll.
• Particularités : n’est implémenté qu’à partir d’Internet Explorer 7 pour les différentes versions d’Internet Explorer

Le positionnement relatif est une forme de positionnement dans le Flux

• Règle CSS :

  1	position : relative;

• Position dans le flux : reste dans le flux, mais peut être décalé à par rapport aux autres éléments.
• On peut dès lors appliquer des propriétés de positionnement tels que top, right, bottom et left tout en restant dans le flux.

Le positionnement flottant est une forme de positionnement hybride

• Règle CSS :

  1 2	float : left; float : right;

• Position dans le flux : se positionne par rapport à l’élément « parent » et permet de dépasser du flux
• Spécificités : hérite d’un rendu type « bloc », peut donc bénéficier de marges.

Et dans le même esprit...

HTML intégration sémantique XHTML XHTML/CSS