Question

我有一个动画渐变背景，我正试图在它上面放一个fancybox。渐变和fancybox在两个不同的堆叠div中，但由于某种原因，渐变阻止访问可点击的缩略图。当我把梯度div拿走时，fancybox就像一个美女。我应该怎么做才能使它们兼容？网站：http://studiopowell.net/TEST_gradient.html

</head>
<body>

<div id="titles"><img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br /><br />&nbsp; M I C H A E L &nbsp; P O W E L L<br /><br /></div>
<a class="fancybox" rel="group" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>

<div id="gradient"></div>

</body>
</html>

css:

.fancybox {
    margin:auto;
    width:10%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
} 

 #titles {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
    color:#33;
    text-align:left;
    padding-left: 20px;
    padding-top: 10px;  
}

#gradient
{
  width: 100%;
  height: 1000px;
  padding: 0px;
  margin: 0px;
  opacity: 0.1;
  margin-top: -600px;
}

Answer 1

这种情况正在发生，因为您的渐变容器位于网站上所有其他元素的顶部。因此，点击时 - 您只需点击渐变容器，而不是点击您的花式框功能的元素。

为了解决这个问题 - 您需要确保要触发花式框脚本的元素位于顶部且可单击。

最好的解决方案是创建一个包装器div元素，它包裹所有站点内容并在该包装器上设置动画渐变。然后在该元素中插入所有图像/徽标等。 e.g。

<div class="wrapper"> <-- Apply your Gradient animation to this element -->
    <div class="titles"></div>
    <a class="fancy box"></a>
</div>

通过遵循此方法 - 您可以确保您的精美框元素和所有其他网站内容仍然可以点击。

Answer 2

只需将CSS position和z-index应用于您的元素，例如：

.fancybox {
    ...
    position: relative;
    z-index: 100;
}
#titles {
    ...
    position: relative;
    z-index: 100;
}
#gradient {
    ...
    position: relative;
    z-index: 10; /* lower for the gradient background */
}

在动画渐变背景上实现jquery fancybox

2 个答案: