Question

我是jquery的新手并且是第一次使用花式盒子。我有几个问题。

当fancybox打开并滚动时，下一张照片会滑过实际包装盒的OUTSIDE，因此它看起来像是从页面右侧进入，而不是停留在精美的盒子结构内。

此外，我的标题设置为非常高的z-index，并且自然地它与花式框的顶部重叠。如何在花式框打开时使用z-index？

这是我的代码。

.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>

Answer 1

1）这就是v2的工作原理。如果您愿意，可以将nextEffect / prevEffect更改为fade。 2）fancyBox使用从8000开始的z-index。因此，要么将fancyBox的每个z-index设置为更高，要么为标题元素设置更低的z-index。

花式盒子z-index和重叠问题

1 个答案: