具有绝对定位子项的 jQuery UI 对话框部分隐藏了溢出的子项答案

【问题标题】：jQuery UI dialog with absolutely positioned child partially hides overflowing child具有绝对定位子项的 jQuery UI 对话框部分隐藏了溢出的子项
【发布时间】：2011-08-28 09:25:29
【问题描述】：

我有一个标准的 jQuery UI 对话框。在该对话框中，我有一个自定义 jQuery UI 按钮，允许我为日历事件选择事件类型。我正在使用 jQuery UI 定位实用程序来绝对定位包含可用事件类型列表的 div，如图所示。

当显示事件类型 div 时，任何长于可用空间的内容都会在对话框边缘消失。如果它是 iframe，或者绝对定位的父级具有更高的 z-index，我会期望这一点。但是，jQuery UI 对话框是一个简单的绝对定位 div，其 z-index 为 1002（默认值），而我的小部件显示事件类型的 div 是一个绝对定位 div，其 z-index 为 1003。我希望我的 div 将在堆叠顺序中具有更高的优先级。

我的问题是：这里发生了什么？为什么我的 div 被对话框的底部边缘隐藏了？

【问题讨论】：

漂亮、干净的应用程序，您已经拥有了。
干杯。它叫 ThoughtFarmer (www.thoughtfarmer.com)

标签： jquery jquery-ui dialog z-index css-position

【解决方案1】：

看起来像是溢出：隐藏在外部对话框元素上。将其设置为溢出：可见解决了问题。

【讨论】：

是的，我遇到了同样的问题并使用以下方法修复了它：$('.ui-dialog').css('overflow', 'visible');

【解决方案2】：

您的包含对话框元素（Z-index 为 1002）是否在其 CSS 中的任何位置设置了 overflow: hidden;？

【讨论】：