La propriété Css position permet d'agir sur le positionnement du bloc concerné dans le flux d'affichage du navigateur. La description des valeurs possibles de cette propriété permet de mieux comprendre son action.

`position: static;`

Il s'agit du positionnement par défaut.

`position: relative;`

Chaque bloc se positionne dans le flux par rapport à son positionnement normal dans le flux.

`position: fixed`

La boîte est retirée du flux normal. Elle est positionnée par rapport au conteneur initial (c'est à dire par rapport à la fenêtre d'affichage du navigateur).

Avec ce code, la boîte d'identifiant id="enHautadroite" sera placée en haut à droite de la fenêtre (et y reste même lorsqu'on descend dans la page). C'est le cas des boutons de navigation qui reste fixé à droite. Il faut alors déclarer des propriétés left, right, top ou bottom pour indiquer où positionner le conteneur.

`position : absolute`

La boîte est retirée du flux normal. Elle se positionne par rapport au premier ancêtre (conteneur) lui-même déclaré en position relative ou absolute (ce qui explique que l'on déclare souvent des blocs en position: relative; sans déclarer de position afin que ce bloc soit bien le référentiel dans un placement absolu de ses fils).

Un cas particulier : les boîtes «flottantes»

Avec la propriété float, la boîte est d'abord positionnée selon le flux normal puis retirée et positionnée le plus à droite ou le plus à gauche à l'intérieur de son conteneur. Le contenu du bloc conteneur va alors entourer la boîte flottante.

Avec ce code, les images flotteront à droite dans leur boîte conteneur.
C'est le cas de l'image ci-contre.

Des sites pour se former

L'objectif de cet exercice est d'observer les comportements.

En commentant/décommentant les sélecteurs de paragraphes p, tester les divers positionnements possibles vis-à-vis du div conteneur. Observer alors les divers problèmes (débordement du conteneur, blocs se superposant, ...).

Observer la différence d'alignement entre float: left; et display: inline-block;.

Observer ce qu'il se passe lorsqu'on modifie min-height en height pour le div:last-of-type.

Affichage à obtenir ?
Une solution ?

Dans le code ci-dessous, quel est le référentiel pour le placement absolu des fils ?
Modifier le code pour que le placement absolu (premier fils) se fasse par rapport au père.

Affichage à obtenir ?
Une solution ?

Définir le style Css afin que l'image apparaisse disposée de la façon suivante :

Le cadre est une bordure de l'élément div.

L'image est disposée à l'aide du paramètre float.

Affichage à obtenir ?
Une solution ?

La situation suivante se produit assez souvent :
un bloc (premier bloc noir) contient des éléments flottants (bloc orange), mais le bloc flottant a une hauteur trop grande et dépasse donc sur le bloc suivant (second bloc noir).

Sans modifier les dimensions et marges des trois blocs, modifier le code pour que le flottant ne déborde pas sur le second bloc noir.

Affichage à obtenir ?
Une solution ?

Dans le fichier qui suit, sans toucher au code Html, définir le Css pour obtenir une page semblable à :

Lorsqu'on survole le cercle 2 :

Lorsqu'on survole le cercle 3.1 :

Le bandeau est centré horizontalement dans la page et il a une largeur de 800px.

<div id="blocPage">
	<header>
		<h1> Titre </h1>
		<nav>
			<ul class="horizontal">
				<li><a href="css_positions.html#"> 1 </a>
					<ul class="vertical">
						<li> <a href="css_positions.html#"> 1.1</a> </li>
						<li> <a href="css_positions.html#"> 1.2</a> </li>
					</ul>
				</li>
				
				<li><a href="css_positions.html#"> 2 </a>
					<ul class="vertical">
						<li> <a href="css_positions.html#"> 2.1</a> </li>
						<li> <a href="css_positions.html#"> 2.2</a> </li>
					</ul>
				</li>

<li><a href="css_positions.html#"> 3 </a>
					<ul class="vertical">
						<li><a href="css_positions.html#"> 3.1</a>
							<ul class="vertical">
								<li><a href="css_positions.html#"> 3.1.1</a>
									<ul class="vertical">
										<li> <a href="css_positions.html#"> 3.1.1.1</a> </li>
										<li> <a href="css_positions.html#"> 3.1.1.2</a> </li>
									</ul>
								</li>
								<li> <a href="css_positions.html#"> 3.1.2</a> </li>
								<li> <a href="css_positions.html#"> 3.1.3</a> </li>
							</ul>
						</li>
						<li><a href="css_positions.html#"> 3.2</a>
							<ul class="vertical">
								<li> <a href="css_positions.html#"> 3.2.1</a> </li>
								<li> <a href="css_positions.html#"> 3.2.2</a> </li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
	
	<h2> Texte </h2>
	<p>
		Pourquoi pas
	</p>
</div>

Affichage à obtenir ?
Une solution ?

<div id="blocPage">
	<header>
		<h1> Titre </h1>
		<nav>
			<ul class="horizontal">
				<li><a href="css_positions.html#"> 1 </a>
					<ul class="vertical">
						<li> <a href="css_positions.html#"> 1.1</a> </li>
						<li> <a href="css_positions.html#"> 1.2</a> </li>
					</ul>
				</li>
				
				<li><a href="css_positions.html#"> 2 </a>
					<ul class="vertical">
						<li> <a href="css_positions.html#"> 2.1</a> </li>
						<li> <a href="css_positions.html#"> 2.2</a> </li>
					</ul>
				</li>

/* Partie css */
ul {
	list-style-type: none;		/* on enlève les puces des listes : */
	margin: 0;
	padding: 0;
	height: 50px;
	}

.horizontal>li {
	/* les éléments li 1, 2, 3 flottent à gauche. 
	Ils apparaissent ainsi alignés : */
	float: left;
	margin: 5px;
	padding: 0;
	}

li {
	/* les éléments li sont déclarés en position relative de façon
	à déclarer en position absolute les sous-listes : */
	position: relative;
	width: 50px; 
	text-align: center;
	}

a {
	display: block;
	margin: 0;
	padding:0;
	border-radius: 50%;		/* pour avoir une forme de disque : */
	border: 1px solid lightgrey;
	background-color: yellow;
	width: 50px;
	height: 50px;
	line-height: 50px;		/* permet d'avoir un texte centré verticalement */
	text-decoration: none;
	color: lightblue;
	font-size: 12px;
	}

.vertical {
	/* les sous-listes ne sont pas affichées a priori : */ 
	display: none;
	}

.horizontal>li:hover>.vertical {
	display: block;		/* affichage sous-liste niveau 1 au survol de l'élément li la contenant : */
	/* enlever le positionnement qui suit et chercher à expliquer la conséquence : */
	position: absolute;
	}

.vertical>li:hover>.vertical {
	display: block;		/* affichage sous-liste  de niveau >1 au survolde l'élément li la contenant  : */
	position: absolute;
	top: 0;
	left: 100%;
	}

header {
	height: 200px;
	position: relative;		/* position relative pour y placer h1 en absolu : */
	background-color: lightgreen;
	margin:0;
	padding:0;
	}

header>h1 {
	position : absolute;
	left: 50%;
	top: 10px;
	color: orange;
	}

nav {
	/* on joue ici sur la marge interne supérieure pour placer nav en bas du bandeau : */
	padding-top: 130px;
	}

#blocPage {
	width: 800px; 
	margin: 0 auto;
	}