Fancy box z-index and overlapping issues

Fancy box z-index and overlapping issues

I am new to jquery and using fancy box for the first time. I am having a
couple of issues.
When fancybox is open and I scroll, the next photo slides over OUTSIDE of
the actual box so it looks like it's coming from the right of the page,
not staying inside the fancy box structure.
Also I have my header set to a very hi z-index, and naturally it overlaps
the top of the fancy box. How do I use z-index on fancy box when its
opened?
Here is my code.
.header {
background:#FFF;
height:65px;
-webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.49);
-moz-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.49);
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.49);
position:relative; z-index:1000001;
}
portfolio_photo {
-webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.49);
-moz-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.49);
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.49);
float:left;
margin-right:20px;
width:31%;
padding:10px;
}
<div class="portfolio_photo">
<a href="<?php echo
get_template_directory_uri();?>/img/slideshow/slide_1.jpg"
class="fancybox" rel="gallery" title="Sample title 1"><img src="<?php
echo get_template_directory_uri();?>/img/slideshow/slide_1.jpg" /></a>
</div>
<script>
$(document).ready(function() {
$(".fancybox").fancybox({
});
});
</script>