javascript - Div with position absolute and lower z-index is showing on top of a higher z-index(fixed position) -


alright... have nav menu when scroll down past it, changes fixed menu on top accompanies page.

but reason, have div on page has absolute position , lower z-index menu still shows on top of menu...

here's function sets menu fixed past point.

$(function(){     var pos = $('#nav').offset().top;     $(window).scroll(function(){         if( $(window).scrolltop() > pos ) {             $('#nav').parent().parent().css({position: 'fixed', top: '0px', background: '#fff', width: '100%', 'z-index': 9002, left:0});         } else {             $('#nav').parent().parent().css({position: 'static', top: '0px', background: 'none', width: '100%', 'z-index': 1});         }     }); }); 

this div showing on top when shouldn't...

.header {    position: relative;    z-index: 1;    margin: 0;    padding: 0; } 

also, here can see example of happening scroll down page.

  1. apply position:relative on <div id="page-content">
  2. change z-index on <header class="site-header"> 2

Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -