Возможно ли иметь всплывающий элемент div, который 'breaks out 'of overflow: scroll или overflow: auto container?

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

<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- индекс. Конечно, я понимаю, что в некотором смысле это именно то, о чем я просил, когда говорил внешнему div переполняться: сначала auto. Но для моего случая использования это не то, что я хочу - я хочу, чтобы всплывающее меню было «сверху» и могло выходить за пределы области прокрутки, оставаясь при этом в нужном месте, то есть прямо под Ссылка "Нажмите здесь". Несмотря на то, что ссылка «Нажмите здесь» может перемещаться при прокрутке контейнера.

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

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

14
задан Stuart 23 August 2010 в 19:21
поделиться

2 ответа

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

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

, поэтому я предлагаю 3 решения:

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

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

12
ответ дан 1 December 2019 в 12:26
поделиться

Я не уверен, какой эффект вы хотите получить, но если вы удалите контейнер всплывающего окна, всплывающее окно появится за пределами прокручиваемого элемента 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>
2
ответ дан 1 December 2019 в 12:26
поделиться