Le flux
Le flux d'un document peut se définir comme étant le comportement naturel d'affichage des éléments d'une page web.
Les balises se succèdent dans l'ordre où elles sont déclarées dans le code HTML et s'affichent en fonction de leur type
(block, inline, inline-block, list-item, et d'autres...).
Le comportement de tout élément peut être modifé grâce à la propriété display.
Un élément dans le flux sera toujours plus simple à manipuler et plus flexible dans sa relation aux autres éléments.
Gardez en tête que laisser à un élément son comportement naturel est toujours à privilégier.
Autrement dit, on ne sortira un élément du flux que lorsqu'on ne pourra pas faire autrement.
L'exemple suivant laisse toutes les balises dans le flux, toutes les balises étant de type bloc celles-ci s'empilent les unes sur les autres.
Démo
<style>
header {
width:80%;
height:80px;
background:#008B8B;
}
nav {
width:90%;
height:50px;
background:red;
}
aside {
width:80%;
height:180px;
background:yellow;
}
section {
width:90%;
height:400px;
background:blue;
color:white;
}
footer {
width:80%;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
La propriété position
La propriété position va nous permettre de gérer les positions des éléments dans le flux.
Cette propriété sera utilisée dès que l'on désire une mise en page pour
laquelle les possibilités du flux ne suffisent plus, et c'est là toute la raison d'être de cette puissante propriété.
La propriété position offre cinq valeurs possibles: static, relative, absolute et fixed.
Chaque valeur correspond à un objectif précis. C’est en comprenant cet objectif que l’on pourra maîtriser les mises en page en CSS.
La valeur position:static
La position static (position:static) est la valeur par défaut, il est donc parfaitrement inutile de l'utiliser.
Les propriétés de décalage top, right, bottom et left sont indisponibles avec static.
En fait, un élément statique ne peut même pas créer un nouveau système de coordonnées pour des éléments descendants!
La valeur position:relative
Exemple 1
Les éléments qui reçoivent un positionnement relatif se comportent de la même façon que ceux qui sont statiques, ils restent dans le flux.
Démo
<style>
header {
position:relative;
width:80%;
height:80px;
background:#008B8B;
}
nav {
position:relative;
width:80%;
height:50px;
background:red;
}
aside {
position:relative;
width:80%;
height:180px;
background:yellow;
}
section {
position:relative;
width:80%;
height:400px;
background:blue;
color:white;
}
footer {
position:relative;
width:80%;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 2
La position relative (position:relative) permet de décaler un élément par rapport à sa position dans le flux au moyen des propriétés de décalage top, right, bottom et left
.
Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale.
L'exemple suivant montre comment la balise section est décalée au moyen des propriétés left et top avec l'utilisation de position:relative.
Démo
<style>
header {
width:80%;
height:80px;
background:#008B8B;
}
nav {
width:80%;
height:50px;
background:red;
}
aside {
width:80%;
height:180px;
background:yellow;
}
section {
position:relative;
top:25px;
left:150px;
width:80%;
height:400px;
background:blue;
color:white;
}
footer {
width:80%;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 3
La propriété position:relative permet de créer un système de coordonnées pour les décalages de ses éléments enfants.
Un système de coordonnées est un point de référence pour servir de référent à un élément enfant le plus souvent positionné en absolu.
Dans l'exemple suivant, la balise aside intégrée dans la balise header, présente un décalage vers le bas à cause du texte présent dans le header qui
précède le aside. On remarque donc bien ici que position:relative respecte scrupuleusement le flux.
Démo
<style>
header {
position:relative;
width:80%;
height:80px;
background:#008B8B;
}
nav {
position:relative;
width:90%;
height:50px;
background:red;
}
aside {
position:relative;
left:700px;
top:0px;
width:80%;
height:180px;
background:yellow;
}
section {
position:relative;
width:90%;
height:400px;
background:blue;
color:white;
}
footer {
position:relative;
width:80%;
height:50px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
La valeur position:absolute
Caractéristiques de position:absolute:
- elle permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code,
contrairement aux flottants.
-
L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient:
il n'existe pour ainsi dire plus aux yeux des éléments qui, eux, restent dans le flux.
-
Un élément positionné en absolu se réfère non pas à son parent direct mais au premier ancêtre positionné qu'il rencontre.
A défaut de parent positionné, il se réfère à la fenêtre dans laquelle s'ouvre la page.
-
L'élément, n'étant plus dans le flux naturel, perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l'élément parent.
Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés
top, bottom, left ou right n'a pas été précisée; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions.
Exemple 1
Dans l'exemple suivant, la balise aside intégrée dans la balise header est positionnée en absolute, aside est sorti du flux.
Démo
<style>
header {
position:relative;
width:80%;
height:50px;
background:#008B8B;
}
nav {
position:relative;
width:80%;
height:30px;
background:red;
}
aside {
position:absolute;
left:100%;
top:0px;
width:10%;
height:100px;
background:yellow;
}
section {
position:relative;
width:80%;
height:400px;
background:blue;
color:white;
}
footer {
position:relative;
width:80%;
height:40px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
Un premier contenu...
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 2 (1)
Le bloc monbloc est positionné en absolute dans le section, il est hors flux.
Démo
<style>
header {
width:80%px;
height:50px;
background:#008B8B;
}
nav {
width:80%px;
height:30px;
background:red;
}
aside {
width:10%px;
height:100px;
background:yellow;
}
section {
position:relative;
width:80%px;
height:400px;
background:blue;
}
.monbloc {
position:absolute;
top:100px;
left:150px;
width:200px;
height:200px;
color:white;
}
footer {
width:80%px;
height:40px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
<div class="monbloc"> Il est positionné dans le section car on a positionné le section en relative.
Si on ne l'avait pas fait il serait calé à 10% du pord supérieur de la fenêtre et à 15% du bord gauche de la fenêtre.
</div>
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
Exemple 2 (2)
Le bloc monbloc est positionné en relative dans le section, il est dans le flux.
Démo
<style>
header {
width:80%;
height:50px;
background:#008B8B;
}
nav {
width:80%;
height:30px;
background:red;
}
aside {
width:80%;
height:100px;
background:yellow;
}
section {
position:relative;
width:80%;
height:400px;
background:blue;
color:white;
}
.monbloc {
position:absolute;
top:10%;
left:15%;
width:20%;
height:200px
}
footer {
width:80%;
height:40px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
<div class="monbloc"> Il est positionné dans le section car on a positionné le section en relative.
Si on ne l'avait pas fait il serait calé à 10% du pord supérieur de la fenêtre et à 15% du bord gauche de la fenêtre.
</div>
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
La valeur position:fixed
Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, à l'exception des points suivants:
- lorsque le positionnement est précisé (top, left,...), l'élément est toujours positionné par rapport à la fenêtre du navigateur
- L'élément est fixé à un endroit et ne pourra se mouvoir, même lors de la présence d'une barre de défilement.
On a repris le même exemple que précédemment, on remarque que le bloc se postionne par rapport au bord de la fenêtre.
Démo
<style>
header {
width:80%;
height:50px;
background:#008B8B;
}
nav {
width:80%;
height:30px;
background:red;
}
aside {
width:80%;
height:100px;
background:yellow;
}
section {
position:relative;
width:80%;
height:400px;
background:blue;
color:white;
}
.monbloc {
position:fixed;
top:10%;
left:15%;
width:20%;
height:200px
}
footer {
width:80%;
height:40px;
background:darkcyan;
}
</style>
</head>
<body>
<header>
Mon beau site
</header>
<aside>
Mes sites préférés
</aside>
<nav>
Mon magnifique menu
</nav>
<section>
<article>
<div class="monbloc"> Il est positionné à 100px du bord supérieur de la fenêtre et à 150 px du bord gauche de la fenêtre.
</div>
</article>
<article>
Un deuxième contenu...
</article>
</section>
<footer>-- le pied de page --</footer>
</body>
La propriété float
La propriété float demeure sans doute, malgré des qualités intrinsèques évidentes, la propriété la plus mal comprise mais surtout,
la plus mal employée des CSS. Sa simplicité d'utilisation apparente recèle pourtant certaines subtilités fondamentales et lui confère malheureusement
un choix inconsciemment systématique pour toute disposition d'éléments en plusieurs colonnes.
