У меня есть прокручиваемая область, которая содержит всплывающие меню. Концептуально, что-то вроде этого:
<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-скрипт, который будет реализовывать сложные вещи для меня за кулисами, поэтому мне просто нужно вызвать его, чтобы получить нужный эффект.
Я бы сказал, что это невозможно сделать без использования JS для вычисления позиции ссылки и последующего отображения всплывающего окна с положением: fixed ..
Проблема в том, что ваше всплывающее окно находится внутри div с overflow: auto
, и все внутри этого div будет влиять на прокрутку, поэтому, чтобы показать всплывающее окно, вам нужно вынести его за пределы этого div, и это единственный способ, который я знаю то есть, используя position: fixed ... (или, может быть, используя position: absolute во всплывающем окне и обертку div с position: relative, которая содержит текст и всплывающие окна)
, поэтому я предлагаю 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>