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.
- apply position:relative on
<div id="page-content"> - change z-index on
<header class="site-header">2
Comments
Post a Comment