Empietement nav sur header flexbox

Bonjour,

Je ne comprends pas pourquoi nav empiete sur header quand je mets un position: fixed pour header?

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: 1 1 auto;
  display: flex;
}

nav {
  width: 10em;
}

nav {
  order: -1;
}

nav {
  padding: 1em;
  margin: 1em;
}
header {
  position: fixed;
  background: #ffeebb;
  width: 10em;
  margin: 1em;

}
nav {
  background: #ccccff;
}

<header>header</header>

  <div class="wrapper">
    <nav>nav</nav>
    <aside></aside>
  </div>

Si vous avez la solution ça serait sympa!
Merci

Bonjour !

C'est plutôt le header qui empiète sur le nav. En le mettant en position : fixed, vous le sortez de son positionnement normal, du 'flux' dans lequel sa position dépend des autres éléments de la page.

Zelena a écrit :
Bonjour !

C'est plutôt le header qui empiète sur le nav. En le mettant en position : fixed, vous le sortez de son positionnement normal, du 'flux' dans lequel sa position dépend des autres éléments de la page.

Vous avez sans doute raison mais cela ne m'apporte pas plus de réponse!!
J'ai beau chercher, retourner le bazar dans tous les sens,impossible de figer ce fichu header . D'autres suggestions peut-être?

camenerve a écrit :

Je ne comprends pas pourquoi nav empiete sur header quand je mets un position: fixed pour header?

La réponse de Zelena semble pourtant claire...
Tout élément pour lequel l'attribut @position a pour valeur "fixed" est sorti du flux courant et placé de façon fixe (étonnant, non ?).
La position qu'il est sensé occuper en temps normal devient donc disponible pour l'élément suivant (en l'occurrence la NAV) qui vient alors prendre sa place à l'écran.
Il faudrait avoir un peu plus de précisions sur ce que tu souhaites faire exactement :
a) un bandeau fixe (mais vraiment fixe...) et une barre de navigation qui puisse se déplacer vers le haut ?
b) ou bien un bandeau fixe ET une barre de navigation en dessous qui elle aussi soit fixe
Dans le second cas, HEADER et NAV doivent avoir leur attribut @position à fixed.
En règle générale, si tu veux ces deux éléments l'un en dessous de l'autre, en haut de l'écran :

header
{
position:fixed;
left:0;
top:0;
right:0;
height:2rem; /* Hauteur (à ajuster à tes besoins) */
}
nav
{
position:fixed;
left:0;
top:2rem; /* Egal à la hauteur du bandeau = placer la NAV en dessous */
right:0;
height:2rem; /* Hauteur (à ajuster à tes besoins) */
}
main
{
position:fixed;
left:0;
top:4rem; /* Egal à la hauteur du HEADER + hauteur de la NAV */
right:0;
bottom:0;
}

Contenu de ta page HTML à placer dans la balise MAIN.
Si dépassement de capacité, un ascenseur sera automatiquement ajouté par le navigateur à droite de ta zone MAIN (et pas sur le HEADER ni sur la NAV).

sepecat a écrit :

La réponse de Zelena semble pourtant claire...
Tout élément pour lequel l'attribut @position a pour valeur "fixed" est sorti du flux courant et placé de façon fixe (étonnant, non ?).
La position qu'il est sensé occuper en temps normal devient donc disponible pour l'élément suivant (en l'occurrence la NAV) qui vient alors prendre sa place à l'écran.
Il faudrait avoir un peu plus de précisions sur ce que tu souhaites faire exactement :
a) un bandeau fixe (mais vraiment fixe...) et une barre de navigation qui puisse se déplacer vers le haut ?
b) ou bien un bandeau fixe ET une barre de navigation en dessous qui elle aussi soit fixe
Dans le second cas, HEADER et NAV doivent avoir leur attribut @position à fixed.
En règle générale, si tu veux ces deux éléments l'un en dessous de l'autre, en haut de l'écran :

header
{
position:fixed;
left:0;
top:0;
right:0;
height:2rem; /* Hauteur (à ajuster à tes besoins) */
}
nav
{
position:fixed;
left:0;
top:2rem; /* Egal à la hauteur du bandeau = placer la NAV en dessous */
right:0;
height:2rem; /* Hauteur (à ajuster à tes besoins) */
}
main
{
position:fixed;
left:0;
top:4rem; /* Egal à la hauteur du HEADER + hauteur de la NAV */
right:0;
bottom:0;
}

Contenu de ta page HTML à placer dans la balise MAIN.
Si dépassement de capacité, un ascenseur sera automatiquement ajouté par le navigateur à droite de ta zone MAIN (et pas sur le HEADER ni sur la NAV).

J'ai essayé ton code mais ça ne fonctionne pas comme je le souhaiterais.
je te mets un exemple de ce que je veux faire ci-dessous.
[code=cssbody {
display: flex;
flex-direction: column;
}

.wrapper {
flex: 1 1 auto;
display: flex;
}

nav {
width: 10em;
}

nav {
order: -1;
}

nav {
padding: 1em;
margin: 1em;
}
header {
position: fixed;
background: #ffeebb;
width: 10em;
margin: 1em;
}
nav {
background: #ccccff;
}
][/code]

<header>header</header>
<main class="wrapper">
    <nav> 
  <div class="link">1</div>
  <ul class="submenu">
      <li><a href="#">1.1</a></li>
      <li><a href="#">1.2</a></li>
       <li><a href="#">1.3</a></li>
       <li><a href="#">1.4</a></li>
       <li><a href="#">1.5</a></li>
       <li><a href="#">1.6</a></li>
       <li><a href="#">1.7</a></li>
       <li><a href="#">1.8</a></li>
       <li><a href="#">1.9</a></li>
    </ul>
  </li>
  <li>
    <div class="link">2</div>
    <ul class="submenu">
       <li><a href="#">2.1</a></li>
      <li><a href="#">2.2</a></li>
       <li><a href="#">2.3</a></li>
       <li><a href="#">2.4</a></li>
       <li><a href="#">2.5</a></li>
       <li><a href="#">2.6</a></li>
       <li><a href="#">2.7</a></li>
       <li><a href="#">2.8</a></li>
       <li><a href="#">2.9</a></li>
    </ul>
  </li>
  <li>
    <div class="link">3</div>
    <ul class="submenu">
      <li><a href="#">3.1</a></li>
      <li><a href="#">3.2</a></li>
       <li><a href="#">3.3</a></li>
       <li><a href="#">3.4</a></li>
       <li><a href="#">3.5</a></li>
       <li><a href="#">3.6</a></li>
       <li><a href="#">3.7</a></li>
       <li><a href="#">3.8</a></li>
       <li><a href="#">3.9</a></li>
    </ul>
  </li>
   </div>
  </nav>
  </main>

Tout marche nickel sauf quand je modifie la hauteur du header (par ex height: 5em).
La partie haute du menu se retrouve caché derriere le header!Moi, je voudrais qu'il se trouve en dessous, quelque soit la hauteur du header.

Bonjour !

camenerve a écrit :

Moi, je voudrais qu'il se trouve en dessous, quelque soit la hauteur du header.

Pourquoi mettre le header en position : fixed ?