Hello à tous,
 
J'aimerais trouver une astuce pour améliorer ma mise en page :  
 
J'ai une div d'entête fixe qui va donc stagner en haut de ma page (une barre avec les menus).  
 
Voici ses propriétés :  
 

 
Ensuite, quelques pixels plus bas, une div centrale qui va prendre le contenu de la page et qui va donc être scrollable :  
 

 
Le problème, c'est que comme les deux div ont une opacité de 60%, une fois que la div centrale est scrollée, elle apparaît par transparence sous le menu entete. J'essaie de trouver une astuce pour ne pas la voir sous le menu, mais je ne tombe pas dessus. Quelqu'un aurait-il une idée miracle ?  
 
Merci !

Peut-être en ajoutant dans .contenupage
clear: right;
ou
clear: left;
ou
clear: both;
L'effet serait que le contenu ne viennent pas glisser en dessous de l'entête, mais je n'ai pas testé et je ne sais pas si ça marche.
Ou alors, il serait peut-être possible de mettre le contenu dans un div position: fixed; qui soit situé en dessous de celui de l'entête.

Essayé mais aucun changement ! Y a rien qui prévoit de changer le comportement d'une div suivant sa position sur l'écran ou quelque chose du genre ?

Merci !

Il est possible de détecter le scrolling, et de faire une action pour changer quelque chose quand le scrolling se produit.
 
Voir http://help.dottoro.com/ljurkcpe.php

C'est pas plutôt un problème de z-index ?

+1, voir meme mettre le tout dans un fixed :
 
Grosso-merdo :
 
- DIV fullscreen, fixed
   -DIV menu, height = 76px...
   -DIV contenuContainer, position :absolute, top:0, box-sizing: border-box, padding-top:76px, height:100%, overflow:scroll;
      -DIV contenu...
 
Et voila !