Возможно ли иметь всплывающий элемент div, который «выходит» из переполнения: scroll или overflow: auto container?

Question

У меня есть прокручиваемая область, которая содержит всплывающие меню.Концептуально, что-то вроде этого:

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
  <div>
    <a href="javascript:$('#popup').show()">Click here</a>
    <div style="position:relative">
      <div id="popup"
           style="display:none; position:absolute; width:150px; height:150px">
        ... more content. This div gets shown and hidden by jquery on click events.
      </div>
    </div>
  </div>
</div>

Проблема в том, что, когда всплывающее меню всплывает, оно также содержится внутри прокрутки div и не отображается вне области прокрутки 100x100 пикселей, независимо от того, каквысоко я делаю z-index.Конечно, я понимаю, что в некотором смысле это именно то, о чем я просил, когда говорил внешнему div переполняться: сначала auto.Но для моего случая использования это не то, что я хочу - я хочу, чтобы всплывающее меню было «сверху» и могло выходить за пределы области прокрутки, оставаясь при этом в нужном месте, то есть прямо подСсылка "Нажмите здесь".Несмотря на то, что ссылка «Нажмите здесь» может перемещаться при прокрутке контейнера.

Я также понимаю, что есть некоторые сложные обходные пути, которые я мог бы использовать, например, поместить всплывающее окно полностью за пределы прокручиваемого div и использовать javascript для позиционирования.Это.И тогда мне нужно было бы реагировать на события прокрутки, чтобы переместить его по мере прокрутки контента и т. Д. Совершенно независимо от необходимости писать много кода, чтобы повторно реализовать то, что мне «бесплатно: position: относительный / position: absolute» дал мне бесплатно, это также потребовало бы немного рефакторинга моего собственного кода, поэтому я бы предпочел этого избежать.

Мне интересно, есть ли какой-нибудь простой трюк, который я могу применить к своему внутреннему div, чтобы сообщить об этомне обращайте внимания на свойство «переполнения» своего контейнера или, если это не удастся, на удобный сценарий jquery, который будет реализовывать сложные вещи для меня за кулисами, поэтому мне просто нужно вызвать его, чтобы получить эффект, которого я добиваюсь.

Answer 1

Я бы сказал, что это невозможно сделать без использования JS для расчета позиции ссылки, а затем отобразить всплывающее окно с позицией: фиксировано.

Проблема в том, что ваше всплывающее окно находится внутри div с overflow:auto, и все внутри этого div будет влиять на прокрутку, поэтому чтобы показать всплывающее окно, вам нужно вывести его за пределы этого div, и единственный способ, которым я знаю, - сделать это с помощью position: fixed ... (или, возможно, с помощью position: absolute во всплывающем окне и оберточного div с position: относительным, который содержит текст и всплывающие окна)

поэтому я предложу 3 решения:

1. поместите всплывающее окно вне div с помощью прокрутки, и когда пользователь нажимает по ссылке отобразить всплывающее окно
2. вычислить точное положение ссылки (x, y) и отобразить всплывающее окно, используя position: fixed и координаты
3. используйте красивое и всегда простое в использовании «окно сообщения» (например, http://csscody.com/demo/wp-content/demo/popup/demo.htm) Я знаю, что это не совсем то, что вы хотели, но .. у меня закончились идеи = D

Надеюсь, это поможет

Answer 2

Отображение всплывающего окна внутри элемента div с «переполнением: авто», «переполнением: прокруткой» или «переполнением: скрытым» всегда будет вызывать проблемы такого рода. Как правило, дочерний элемент не может отображаться за границами родителя во всех этих случаях, потому что свойство переполнения делает именно это. Использование « position: fixed » для всплывающего окна решит вашу проблему, НО, если вы прокрутите вниз, вы увидите, как всплывающее окно отображается в старой позиции, предшествующей событию прокрутки. Для решения этой проблемы вы можете использовать JQuery следующим образом:

$(".your-popup-PARENT-class").live( {
    mouseenter: function(event) {
        event.stopPropagation();
        var position = $(this).offset();
        $(this).find(".your-popup-class").css("top", (position.top + 30) );
        $(this).find(".your-popup-class").css("left", position.left);
        $(this).find(".your-popup-class").css("display", "inherit");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".your-popup-class").css("display", "none");
    }
});

Этот сегмент кода находит ваш родительский элемент всплывающего окна в дереве DOM, сохраняет текущую позицию и отображает всплывающее окно в той же позиции родительского элемента. Как видите, вы можете добавлять или удалять необходимые пиксели (жирный код в предыдущем верхнем определении CSS).

Надеюсь, это будет полезно для кого-то еще с таким типом проблемы.

С уважением!

Answer 3

Я не уверен, какой эффект вы получите, но если вы удалите контейнер всплывающего окна, то всплывающее окно будет отображаться за пределами прокручиваемого div.

<div style="overflow:auto; width:100px; height:100px">
  ... content here that's big enough to trigger scrollbars...
    <div id="popup"
         style="display:none; position:absolute; width:150px; height:150px">
      ... more content. This div gets shown and hidden by jquery on click events.
    </div>
</div>