是否可能有一个弹出的div“溢出”溢出：scroll或overflow：auto container？ [英] Is it possible to have a popup div that 'breaks out' of an overflow:scroll or overflow:auto container?
问题描述
我有一个可滚动区域包含弹出菜单。在概念上，这样的：
I have a scrollable area that contains popup menus. Conceptually, something like this:
<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溢出：汽车在第一个地方。但是对于我的使用情况，这不是我想要的 - 我想要弹出菜单是over the top，并能够扩展到可滚动区域之外，同时仍然保持在正确的地方，这就是说，直接在点击这里链接。即使点击这里链接可以随着容器滚动移动。
The problem is that when the popup menu pops up, it is also contained within the scrolling div, and doesn't show up outside the 100x100 pixel scrollable area no matter how high I make the z-index. I realize of course that in a sense that's exactly what I asked for when I told the outer div to be overflow:auto in the first place. But for my use case it isn't what I want - I want the popup menu to be "over the top" and able to extend outside the scrollable area, while still staying in the right place, which is to say, directly underneath the "Click here" link. Even though the "Click here" link can move around as the container is scrolled.
我也意识到有一些复杂的解决方法，我可以使用，如完全弹出外面的可滚动div和使用javascript来定位它。然后我需要反应滚动事件，以重新定位它的内容滚动等等。除了需要编写大量的代码重新实现位置：相对/位置：绝对给我的免费，这也需要相当多的重构我自己的代码，所以我宁愿避免它。
I also realize that there are some complicated workarounds I could employ, like putting the popup entirely outside the scrollable div and using javascript to position it. And then I'd need to react to scroll events to reposition it as the content is scrolled, etc. Quite apart from needing to write lots of code to re-implement what the "position:relative/position:absolute" gave me for free, that'd also require quite a bit of refactoring of my own code, so I'd rather avoid it.
我想知道是否有一些简单的技巧应用到我的内部div，告诉它忽略它的容器的overflow属性，或者，否则，一个方便的jquery脚本，将实现我的幕后的复杂的东西，所以我只需要调用它来获得效果， m after。
I'm wondering if there's some simple trick I can apply to my inner div to tell it to disregard its container's "overflow" property, or, failing that, a handy jquery script that will implement the complicated stuff for me behind the scenes so I just need to call it to get the effect I'm after.
推荐答案
我想说，如果不使用JS来计算链接的位置是不可能的，然后显示弹出窗口的位置：fixed ..
I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..
问题是你的弹出框是在一个div overflow：auto 和div内部的所有内容将影响滚动，所以要显示弹出框，你需要把它带到div外面，我唯一的方法，我知道这样做是通过使用position：fixed ...（或也许在弹出窗口中使用position：absolute，并且一个包含了位置：包含文本和弹出窗口的relative的wrapper div）
The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)
所以我会提出3个解决方案： p>
so i'll propose 3 solutions:
- 滚动显示div外的弹出式窗口，当用户在链接上单击
时，显示弹出 - 计算链接的确切位置（x，y），并使用position：fixed和坐标
- 显示弹出窗口。使用消息框（例如 http://csscody.com/demo/wp-content/demo/ popup / demo.htm ）我知道这不是你想要的，但是我跑出了想法= D
- put the popup outside the div with scroll, and when the user clicks on the link, display the popup
- calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
- use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D
我希望这有助于
这篇关于是否可能有一个弹出的div“溢出”溢出：scroll或overflow：auto container？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
