是否有可能有一个弹出 div '突破'溢出：滚动或溢出：自动容器？

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 中，无论我将 z-index 设置多高，都不会显示在 100x100 像素的可滚动区域之外。我当然意识到，从某种意义上说，这正是我首先要求外部 div 溢出时所要求的：auto。但对于我的用例，这不是我想要的——我希望弹出菜单“在顶部”并且能够延伸到可滚动区域之外，同时仍然保持在正确的位置，也就是说，直接在“点击这里”链接。即使“单击此处”链接可以在容器滚动时四处移动。

我也意识到我可以使用一些复杂的解决方法，比如将弹出窗口完全放在可滚动的 div 之外并使用 javascript 来定位它。然后我需要对滚动事件做出反应，以便在滚动内容时重新定位它，等等。除了需要编写大量代码来重新实现“位置：相对/位置：绝对”给我的东西是免费的，这也需要对我自己的代码进行相当多的重构，所以我宁愿避免它。

我想知道是否有一些简单的技巧可以应用于我的内部 div 来告诉它忽略其容器的“溢出”属性，或者，如果失败了，一个方便的 jquery 脚本将为我在后面实现复杂的东西场景，所以我只需要调用它来获得我想要的效果。

Answer 1

我想说，如果不使用 JS 计算链接的位置，然后显示带有 position:fixed.. 的弹出窗口，这是不可能的。

问题是您的弹出窗口位于带有overflow:auto 的 div 内，该 div 内的所有内容都会影响滚动，因此要显示弹出窗口，您需要将其带到该 div 之外，这是我知道的唯一方法做到这一点是通过使用 position:fixed... （或者可能在弹出窗口上使用 position:absolute 和一个包含文本和弹出窗口的 position:relative 的包装 div）

所以我会提出 3 个解决方案：

1. 将弹出框放在 div 外滚动，当用户点击时 在链接上，显示弹出窗口
2. 计算链接的准确位置 (x,y) 并使用 position:fixed 和坐标显示弹出窗口
3. 使用一个漂亮且始终易于使用的“消息框”（例如http://csscody.com/demo/wp-content/demo/popup/demo.htm）我知道这不是您想要的，但是..我没有想法=D

希望对你有帮助

Answer 2

在 div 的 a 中显示带有“overflow: auto”、“overflow: scroll”或“overflow: hidden”的弹出窗口总是会产生此类问题。按照规则，在所有这些情况下，子元素都不能显示在父元素的边界之外，因为溢出属性正是这样做的。对弹出窗口使用“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>

Answer 4

我对此没有答案，但如果你找到了一个好的答案，我很想听听。我有一个非常相似的问题（我有一个选项列表供用户选择以修改滚动部分中的项目。如果我在列表的底部附近看起来不太好。