неправильное позиционирование jquery

Question

У меня есть div (с триггерами класса) с изображениями, и этот div находится в div с контейнером id. позиционирование для контейнера div установлено на относительное, что приводит к появлению наложения в правом нижнем углу, а когда изображение становится больше, оно выходит за пределы экрана.

как я могу это исправить?

Я прочитал это, но это не будет хорошим решением для меня, я не могу переместить его за пределы основного div и не могу удалить относительное позиционирование для контейнера div -> Инструменты Jquery Overlay CSS Конфликт, изображение расположено под оверлеем

Я отправил сообщение на форуме, но помощь не была оказана -> http://flowplayer.org/tools/forum/40/32440

Answer 1

Я обнаружил в IE8, даже если я наложу код оверлея непосредственно перед закрывающим тегом тела, он все равно не будет отображаться правильно. Только выше: $ (target) .appendTo ('body'); работал! Вероятно, это было связано с другой записью JavaScript в DOM. Простая вещь, используйте это, чтобы быть уверенным.

Answer 2

Это можно исправить, переместив оверлейный элемент за пределы относительно расположенного элемента 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>