Figer l'entête - Position: fixed

**BOU59000** · 12/10/2021, 20h20

Bonsoir à toutes et à tous,

Je me posais une question par rapport à position: fixed;.

Mon site est composé des blocs suivants:
. Entête
. Navigation
. corps de la page
. Pied de page

Je souhaite figer l'entête ainsi que la navigation en haut de la page.
Pour cela, j'utilise position: fixed;.
Cela fonctionne mais j'ai quelques bugs avec cela...
En fixant la position, j'ai l'impression qu'entête et navigation "flottent au dessus" du reste.
De fait, Corps de page et pied de page remonte en haut de la page et sont masqués par entête + navigation.

Je crée une marge supérieure au dessus de corps de page pour le décaler du haut de la page mais ce n'est pas très propre comme code... et surtout je ne suis pas certain que le rendu soit le même sur tous les navigateurs/ tous les supports de lecture.

Y a t-il une manière plus propre de coder cela?

D'avance merci pour vos retours

Bonne soirée

**NoSmoking** · 13/10/2021, 11h32

Bonjour,

Pour faire court :
avec la position:fixed l’élément est retiré du flux du document donc effectivement les éléments suivants « prennent sa place », il remontent.
Pour que l’élément suivant, dans la chronologie de la page et sauf indications contraires, soit visible il faut donc effectivement lui affecter une margin-top équivalent à la hauteur de l’élément en position fixed, c’est donc tout à fait normal et tout à fait propre.

On notera que ce type de positionnement fait que l’élément n’occupe, sans plus d’indications, que la place nécessaire à son contenu.

Y a t-il une manière plus propre de coder cela?

Pas forcément plus propre, mais plus actuelle, est la solution d’utiliser un élément en position:sticky.
L’élément se comporte comme un élément en position:relative, donc dans le flux du document, avec la particularité de se « scotcher » lorsque son conteneur atteint la position définie via les propriétés left et/ou top lors d’un scroll par exemple.

L’avantage est que l’élément suivant reste bien à sa place tant que l’élément n’a pas atteint sa position « scotchée » auquel cas le comportement s’apparente à la position fixed.

Un autre avantage est de ne pas avoir à déclarer une margin-top à l’élément suivant.

Essaie avec ce code en modifiant le type de la position du <header> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky vs fixed</title>
<style>
html,
body {
  margin: 0;
  padding: 0;
}
header {
  position: sticky;
/*  position: fixed; /*- a décommenter -*/
  top: 0;
  height: 10em;
  background-color: #DEF;
}
main {
  height: 100em;
  background-color: #FDE;
}
footer {
  height: 10em;
  background-color: #EFD;
}
</style>
</head>
<body>
  <header>&lt;header> </header>
  <main>&lt;main> </main>
  <footer>&lt;footer> </footer>
</body>
</html>

**BOU59000** · 14/10/2021, 15h42

Bonjour,

Merci pour ta réponse.
Cela fonctionne super bien!

J'ai adapté pour "coller" mon header + mon nav en haut de ma page.
Cela donne cela (ton code légèrement modifié):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
		<style>
            html,
            body 
            {
              margin: 0;
              padding: 0;
            }
            header
            {
              position: sticky;
              top: 0;
              height: 11em;
            }
            nav
            {
              position: sticky;
              top: 12em;
            }
        </style>

Pour l'instant j'ai juste fait mes petits modifs sans trop comprendre 100% de ce paramètre.
Je dois désormais faire mes recherches dessus.
Par exemple, je ne savais pas que l'on pouvait coller directement cela dans le code html entre des balises style

(encore tant de choses à assimiler

)

Un grand merci à toi en tout cas, tu m'as vraiment beaucoup aider

Figer l'entête - Position: fixed

Positionnement en CSS

Discussions similaires

Partager

Partager