隐藏在容器对话框后面的 datetimepicker 弹出窗口答案

【问题标题】：datetimepicker popup hiding behind the container dialog box隐藏在容器对话框后面的 datetimepicker 弹出窗口
【发布时间】：2012-01-27 02:07:52
【问题描述】：

我在我的项目中使用这个选择器，我需要更改选择器的 z 索引值，因为它在模式窗口后面弹出，我想增加 datetimepicker 的 z 索引。我目前已经在 datetimepicker 的定义中添加了 zIndex 属性，就像这样

jQuery(function() {
                       jQuery( "#from_date" ).datetimepicker({ dateFormat: 'yy-mm-dd',
                           showOn: "button",
                           zIndex:9999,
                            buttonImage: "/gra/images/icons/fugue/calendar-month.png",
                           buttonImageOnly: true });
               });

它高于弹出对话框的 z 索引，其中放置了日期选择器按钮，但它没有出现在顶部。除了定义之外，我还需要在 css 样式中的哪些其他地方设置 z 索引值？

更新：我使用了 Firebug 并找到了原因，但没有找到解决方案。对话框 z-index 是 1001，我知道我已经在 css 中设置了它。但是日期选择器的 z-index 值为 91，我尝试搜索类 ui-datepicker-div 但现在找不到任何 z-index 值为 91 的类，有一个 zindex 为 91 的#search 类，我将其更改为 9999 （认为那是它继承的那个），但它仍然再次在萤火虫中显示值 91 ..?? 与 datepicker html 组件关联的类是

<div id="" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ... z-index=91....>
<html for date picker>
</div>

【问题讨论】：

如果您使用的是 firebug，请查看它并查看它的 z-index 实际渲染为什么，与在其顶部渲染的元素相比。（您可能也想在 jsfiddle 上举个例子......）
您能否提供指向您网站的 URL 或 jsfiddle.net 上的示例？肯定有 CSS 问题。
我遇到了同样的问题。时间滑块有用吗？我可以通过单击滑块来更改时间，但不能通过拖动来更改时间。

标签： jquery datetimepicker

【解决方案1】：

这是 zIndices 的大问题。

<div style='position:relative'id="global-container">
    <div style='position:relative;z-index:1'id="container-1">
        <div style='position:relative;z-index:50'id="content-1"> content 1 </div>
    </div>
    <div style='position:relative;z-index:2'id="container-2">
        <div style='position:relative;z-index:2'id="content-2"> content 2 </div>
    </div>
</div>

您可以假设#content-2 将出现在#content-1 下方，但问题是z 索引是在其相关容器内进行比较的。所以计算的 z 指数是 #container-1 和 #container-2。我会建议一个仅用于弹出窗口的图层。在全局容器中具有令人难以置信的高 z-index 的东西。无论如何，它都会覆盖。

现在在 ie7 中，据我所知，它只是拥有最高 z-index 的人，但在现代浏览器中，它取决于整个链，因此弹出窗口需要 ui 层。

Youtube iframe 将主导任何 z-index 弹出窗口，至少我不知道如何解决这个问题......但是。

【讨论】：

看看每一位父母。验证他们的 z-index。没有真正的灵丹妙药。您可以尝试查看 google chrome，它可以告诉您哪些样式被覆盖。