Question

我正在为我的项目使用这个选择器，我需要更改选择器的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索引，其中放置了datepicker按钮，但它不在顶部。我需要将css样式中的哪些其他位置设置为除定义之外的z索引值？

更新：我使用了Firebug并找出了原因，但没有找到解决方案。对话框z-index是1001，我知道因为我在css中设置了它。但是日期选择器的z-index值是91，我试图搜索类ui-datepicker-div，但是现在找不到任何z-index值为91的类，有一个#search类，zindex为91，然后我将它改为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>

Answer 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-indices在其相对容器中进行比较。因此，计入的z指数为#container-1和#container-2。我建议只为弹出窗口一层。在全局容器中具有令人难以置信的高z-index的东西。无论如何，它都会覆盖。

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

Youtube iframe只会占据任何z-index弹出窗口，至少我无法弄清楚如何绕过那个......但是。

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

1 个答案: