Question

我有一个带有类触发器的div（带有类触发器），并且div位于带有id容器的div中。容器div的定位设置为相对，导致叠加显示在右下角，当图像较大时，它将移出屏幕。

我该如何解决这个问题？

我读过这个，但这对我来说不是一个好的解决方案，我不能将它移到主div之外，我无法删除容器div的相对定位 - ＆gt; Jquery tools Overlay CSS Conflict, Image positioned under the overlay

我在论坛上发帖但没有给出帮助 - ＆gt; http://flowplayer.org/tools/forum/40/32440

Answer 1

这可以通过将覆盖元素移动到相对定位的div之外来修复。

在应用叠加方法之前，您可以使用jquery轻松完成此操作，例如

<div style="position: relative; top: -5px;">
    <a href="#" class="overlayTrigger" rel="myOverlay">My overlay trigger</a>
    <div id="myOverlay"> Testing 123 </div>
</div>

<script>
jQuery(function($) {
    $("a[rel].overlayTrigger").each(function() {
        var el = $(this);
        var target = el.attr('rel');
        $(target).appendTo('body');
        el.overlay({
            target: target,
            top: "center",
            expose: { 
                color: '#333',
                loadSpeed: 200,
                opacity: 0.9
            }
        });
    });
});
</script>

Answer 2

我发现IE8，即使我把覆盖代码放在关闭的body标签之前，它仍然无法正确显示。只有以上：$（target）.appendTo（'body'）;成功了！这可能是由于其他javascript写入DOM。简单的事情，确保使用它。

jquery叠加错误的定位

2 个答案: