Position fixe ne fonctionnant pas pour l'en-tête
J'essaie de créer un effet très simple où la navigation reste en haut de la page lorsque vous faites défiler la page. Tout ce que je dois faire est de mettre "position: fixed" dans l'en-tête, que j'ai actuellement. Pour une raison quelconque, cela le traite plus comme un élément "position: absolu" que comme fixe. Je l'ai essayé sur d'autres éléments de la page avec le même effet, donc je dois avoir quelque chose qui dans mon code HTML ou CSS est à l'origine du problème. Des idées?
http://jsfiddle.net/apautler/yDhXG/1/embedded/result/
En-tête CSS
.nav-main {overflow: visible; position: fixed;
top: 0; left: 0; right: 0; height: 60px; width: 100%;}
Notez que le site est réactif, donc le position: fixed entre en action à 768 pixels.
Pour le moment, Chrome ne peut pas rendre position:fixed sur les éléments en cours de transformation . Supprimer le (sans contenu)
-webkit-transform: translate3d(0, 0, 0);
et cela fonctionnera .