Rollover gallery images appear over my fixed header when animating

Rollover gallery images appear over my fixed header when animating

I have a fixed div header. A header that stays at the top of the page when
scrolling up/down.
#top {
text-align: center;
margin: 0 auto;
background-image: url(layout/bannerbg.png);
background-size: 100% 100%;
height: 50px;
overflow: hidden;
position: fixed;
width: 100%;
-moz-box-shadow: 0px 3px 10px 6px #000;
-webkit-box-shadow: 0px 3px 10px 6px #000;
box-shadow: 0px 3px 10px 6px #000;
}
On my page that conatins my image gallery, the gallery images use a jQuery
rollover, fade in/out effect. During the fade in/out, the image briefly
appears on top of my fixed header. Anyone know a quick fix for this?