### Principes

`position: fixed;`

Le positionnement fixe est une variante du positionnement absolu : le conteneur de la boîte positionnée est le bloc conteneur intiale, à savoir la zone d'affichage de la fenêtre du navigateur (viewport).
On affecte à la propriété position la valeur `fixed`.

Une boîte en positionnement fixe est totalement retirée du flux normal : l'emplacement de l'élément dans le code HTML n'a absolument aucune importance.
Elle est ensuite positionnée à l'intérieur de la zone d'affichage de la fenêtre du navigateur suivant les valeurs de ses propriétés top, left, bottom et right.
Le positionnement est calculé par rapport à la bordure de la fenêtre, soit la zone de contenu plus la marge interne.

Le mode de calcul et les possibilités sont les mêmes que pour le positionnement absolu vu précédemment.

Comme la boîte est positionnée par rapport à la zone d'affichage de la fenêtre du navigateur, elle reste toujours visible et ne bouge pas quand on fait défiler le contenu de la page.

Dans les exemples suivants, le contenu de la page est volontairement allongé pour que l'on puisse faire un défilement vertical.

Exemple : positionnement fixe
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p id="envoie">Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </body> </html>
Fichier CSS : styles.css
body { margin: 0; padding: 0; } p { margin: 10px; border: 1px solid #000; padding: 5px; background-color: azure; } h3 { position: fixed; top: 25px; right: 25px; padding: 5px; margin: 0; border: 1px solid; background: orange; }

### Entête toujours visible

Si on veut réaliser une mise en page avec un en-tête qui reste toujours visible (comme ce tutoriel par exemple), il faut procéder de la façon suivante :

- fixer la largeur de la boîte à la largeur de la fenêtre avec `left: 0;` et `right: 0;`
- mettre une marge supérieur à l'élément body plus grande que la hauteur de la boîte pour le contenu du début de la page soit visible.

Exemple : en-tête fixe
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p id="envoie">Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </body> </html>
Fichier CSS : styles.css
body { margin: 0; margin-top: 50px; /* une marge pour que le haut de la page soit visible */ padding: 0; } p { margin: 10px; border: 1px solid #000; padding: 5px; background-color: azure; } h3 { position: fixed; top: 0; /* en-tête collé en haut */ left: 0; /* toute la largeur de la fenêtre */ right: 0; /* toute la largeur de la fenêtre */ padding: 5px; margin: 0; border: 1px solid; background: orange; }

La réalisation d'un pied de page toujours visible peut être fait de la même façon, à la différence que c'est la propriété bottom qui sera utilisée à la place de top et que c'est la marge inférieur de body qui sera définie pour la fin du contenu de la page soit visible.

### Boîte de dialogue modale

Un effet que l'on trouve souvent est l'affichage d'un message ou d'une boîte de dialogue avec un filtre qui recouvre toute la fenêtre et qui empêche toute interaction tant que la boîte de dialogue n'est pas fermée. On appelle celà une boîte de dialogue (ou une fenêtre) modale.
L'exemple suivant montre comment peut être réalisé la chose. On commencera par le montage CSS, sans ajouter d'interactivité.

Exemple : boîte de message modale
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="cache"> <div id="message">Cliquez ici pour fermer</div> </div> <h3>L'Arrière des Etoiles</h3> <p id="cliquer">Cliquez ici pour afficher la boîte de dialogue modale.</p> <p>Les CSS sont l'arme secrète de la Force !</p> <p id="envoie">Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </body> </html>
Fichier CSS : styles.css
body { margin: 0; padding: 0; } p { margin: 10px; border: 1px solid #000; padding: 5px; background-color: azure; } #cache { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; } #message { position: fixed; width: 200px; height: 100px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 2; background: orange; }

Explications

La structure HTML est très simple : 2 éléments div imbriqués. Le premier recouvrira toute la fenêtre et le second contient le message.

    <div id="cache">
    	<div id="message">Cliquez ici pour fermer</div>
    </div>

L'élément "cache" est stylé de la façon suivante :

    #cache {
    	position: fixed;
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	background: rgba(0, 0, 0, 0.4);
    	z-index: 1;
    }

La boîte est en position fixe et les valeurs de top, left, bottom et right sont 0. Ainsi la boîte cachera toute la fenêtre du navigateur, même si on scroll.
Pour laisser voir le contenu sous la boîte, on lui affecte une couleur de fond noir avec une transparence :
`background: rgba(0, 0, 0, 0.4);`
Finalement on lui donne un z-index de 1 pour que la boîte viennent bien au dessus de la page et qu'ainsi elle empêche de cliquer sur les éléments de la page (principe d'une fenêtre modale).

L'élément "message" est stylé de la façon suivante :

    #message {
    	position: fixed;
    	width: 200px;
    	height: 100px;
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    	z-index: 2;
    	background: orange;
    }

Il est lui aussi en position fixe pour qu'il reste toujours au milieu de la page même si on scroll.
Il y a une astuce pour que l'élément soit affiché au milieu de la page. On donne les dimensions de sa zone d'affichage (height et width et on donne les dimensions de la boîte entière (ie contenu + marge intérieure + bord + marge extérieure) avec top, left, bottom et right. Ensuite, en fixant les dimensions des marges externes à `auto`, le navigateur va les calculer automatiquement en les répartissant également pour la droite et la gauche et pour le haut et le bas. On obtient ainsi une boîte fixe toujours centrée dans la fenêtre d'affichage.

Pour ajouter de l'interactivité, on utilise JavaScript qui va exécuter des fonctions quand on clique sur le paragraphe qui affiche la boîte modale et quand on clique sur la boîte de message pour la fermer.
L'affichage ou le masquage se fait très simplement par le changement de la valeur de la propriété display de la boîte "cache". On ajoute dans les déclarations de style de cette boîte `display: none;` et ainsi la boîte ne sera pas affichée. Avec JavaScript, on change la caleur de cette propriété pour `block` quand on veut l'afficher et on revient à la valeur `none` quand on veut la masquer.

L'exemple complet avec l'interactivité ...

Exemple : boîte de message modale
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="cache"> <div id="message">Cliquez ici pour fermer</div> </div> <h3>L'Arrière des Etoiles</h3> <p id="cliquer">Cliquez ici pour afficher la boîte de dialogue modale.</p> <p>Les CSS sont l'arme secrète de la Force !</p> <p id="envoie">Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> <script> (function() { var C = document.getElementById('cache'); document.getElementById('message').addEventListener( 'click', function() { C.style.display = 'none'; }, false); document.getElementById('cliquer').addEventListener( 'click', function() { C.style.display = 'block'; }, false); })(); </script> </body> </html>
Fichier CSS : styles.css
body { margin: 0; padding: 0; } p { margin: 10px; border: 1px solid #000; padding: 5px; background-color: azure; } #cache { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; } #message { position: fixed; width: 200px; height: 100px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 2; background: orange; }