Positionnement fixe CSS19

Plusieurs petits exercices consistant à tester les principes du positionnement fixe en CSS en reproduisant des modèles.

Pour rappel, le positionnement fixe consiste à positionner un élément HTML par rapport à la fenêtre du navigateur. Ce positionnement s’effectue avec les propriétés display, top, bottom, left et right.

Deux points à retenir lorsqu’un élément est positionné en fixe :

  • L’élément sort du flux HTML, l’espace qu’il occupait dans le flux est donc libéré.
  • Les éléments de type bloc n’ont plus une largeur de 100% par défaut.

Préparation de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

Créez un fichier html intitulé position-css19.html avec la structure de base.

Afficher la solution

Solution :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

Créez un fichier css intitulé  style.css et liez-le à la page position-css19.html.

Afficher la solution

Solution :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire.

<link  rel="stylesheet" type="text/css" href="style.css">

Exercice 1 : en-tête (pas à pas)

HTML : Ajoutez suffisamment de contenu dans la page pour quelle puisse défiler. Pour cela, utiliser du lorem ipsum : Lorem Ipsum

HTML : En haut de la page, ajouter un élément de type bloc contenant le titre “Position fixe”. Ce bloc servira de bloc d’en-tête.

Afficher la solution HTML

Solution HTML :

<div>Position fixe</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lacus ac sem dictum luctus. Praesent rutrum malesuada scelerisque. Donec consectetur condimentum semper. Quisque sed massa sit amet nisi sagittis maximus. Vestibulum facilisis et risus ut euismod. Vivamus consectetur ornare orci ut vehicula. Mauris quis suscipit ligula.</p>

HTML : Ajoutez une classe CSS au bloc d’en-tête afin de pouvoir le positionner en CSS par la suite.

Afficher la solution HTML

Solution HTML :

<div class="header">Position fixe</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lacus ac sem dictum luctus. Praesent rutrum malesuada scelerisque. Donec consectetur condimentum semper. Quisque sed massa sit amet nisi sagittis maximus. Vestibulum facilisis et risus ut euismod. Vivamus consectetur ornare orci ut vehicula. Mauris quis suscipit ligula.</p>

CSS : Ajoutez une couleur d’arrière-plan opaque à 50% au bloc d’en-tête afin de pouvoir le visualiser.

Afficher la solution CSS

Solution CSS :

.header {
  background-color: rgba(235, 210, 52, 0.5);
}

CSS : Réglez la hauteur du bloc d’en-tête pour qu’il fasse 100px.

Exo 1 - Aperçu 1
Afficher la solution CSS

Solution CSS :

.header {
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
}

CSS : Positionnez le bloc d’en-tête en fixe.

Afficher la solution CSS

Solution CSS :

.header {
  position: fixed;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
}

CSS : Positionnez le bloc d’en-tête dans le coin en haut à droite du navigateur.

Afficher la solution CSS

Solution CSS :

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
}

CSS : Dimensionnez le bloc d’en-tête pour qu’il occupe 100% de la place disponible.

Afficher la solution CSS

Solution CSS :

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
  width: 100%;
}

CSS : Ajoutez une marge supérieure de 110px au corps de la page pour que le contenu débute en dessous du bloc d’en-tête.

Afficher la solution CSS

Solution CSS :

body {
  margin-top: 110px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(235, 210, 52, 0.5);
  height: 100px;
  width: 100%;
}

Si ce n’est pas déjà fait, testez le défilement de la page.

Exercice 2 : boutons de navigation interne (basé sur un modèle)

Créer un nouveau fichier position-css19-2.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le.

Afficher un indice

Indice :

Pour savoir comment créer les triangles, vous pouvez consulter l’animation suivante Comment créer un triangle en CSS ?

Sauf mention contraire*, l'article Positionnement fixe [CSS19] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.