Informatique


Le positionnement

Aller à

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.

Rôle et détournement des flottants

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d'habillages consistant à "enrouler" un texte autour d'un élément (graphique ou texte).

À l'instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu'occupe son contenu.
Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper.

Deux objets flottants dans la même direction se rangeront côte à côte, seul un contenu demeuré dans le flux qui les succède immédiatement initiera l'habillage. C'est justement ce caractère hâtif de disposition adjacente de blocs qui est la cause d'une mauvaise et sur-utilisation de cette propriété trop souvent écartée de son application originale.

On a repris le même exemple que précédemment, dans le section on place deux images avec float.

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;
}
DIV{
text-align:justify;
} 
.image1{
margin:1% 1% 0 0;
float:left;
} 
.image2{
margin:1% 0 0 1%;
float:right;
} 

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>
	 <H2>Andy Warhol</H2> 
		<DIV> J'aime l'Amérique, et cela pour diverses raisons.<BR> Mes images sont des messages symboliques 
		concernant les produits tape-à-l'œil, impersonnels, 
		<IMG class="image1" SRC="../../image/warhol.jpg">
		<IMG class="image2" SRC="../../image/warhol.jpg"> 
et ces objets matérialisés à outrance sur lesquels l'Amérique d'aujourd'hui est construite.
<BR> Ils sont la projection de tout ce qui peut  se vendre et s'acheter; des symboles pratiques 
mais éphémères qui nous gardent vifs et allègres. J'aime l'Amérique, et cela pour diverses raisons.
 </DIV> 
	</article>
</section>
<footer>-- le pied de page --</footer>
</body>

Nettoyer les flottants

La propriété clear s'utilise conjointement aux float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier.
Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).