Question

我正在研究.NET Web应用程序，我在其中使用CalendarExtender控件让用户指定日期。出于某种原因，当我单击图标以显示日历时，背景似乎是透明的。

我正在其他网页上使用扩展程序而不会遇到此问题。

我不确定是否值得一提，但是日历嵌套在一个附有圆角扩展器的面板上，以及它下面的面板（“From”重叠的地方）。 / p>

在该面板中，我确实有一个div布局设置来创建两列。

编辑：这里要注意的另一件事是，如果重要的是，具有昵称的名称和“占位符”的部分都是ASP.NET标签控件。

Answer 1

所以更多的讨论，我找出了问题。部分问题源于我设置为创建两个单独列的div布局使用position：relative和float：right / left属性。

根据我的阅读，一旦开始扩充div标签的position属性，它就会影响渲染的z-index，只有当日历控件动态“弹出”时才会变得复杂。 / p>

不幸的是，CalendarExtender没有Z-Index属性，除非您想为日历编写整个样式，我不想这样做。但是，您可以通过将以下内容添加到CSS文件来扩展默认样式：

.ajax__calendar_container { z-index : 1000 ; }

如果您没有使用CSS文件，也可以将其添加到页面的head部分：

<style type="text/css">
   .ajax__calendar_container { z-index : 1000 ; }
</style>

这应该可以解决问题。它对我有用。

如果由于某种原因这不起作用（并且有些人仍然报告问题），更多“积极”的方法是将输入字段和CalendarExtender包装在DIV标记中，然后将以下内容添加到CSS文件中/ HEAD部分：

.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible; display: block;
}
.ajax__calendar iframe
{
    left: 0px !important;
    top: 0px !important;
}

......希望这对你有用。

Answer 2

我发现解决IE7中的问题的唯一方式是在我遇到问题的页面上添加一些额外的CSS。没有任何数量的z-indexing或div包装和重新样式产生影响。

以下更改控件堆叠上下文。

.ajax__calendar_container
{
    position:static;
}

这会导致日历弹出窗口垂直显示在扩展器控件上方，而不是正常垂直下方。对我来说这是可以接受的。

Answer 3

这对我来说看起来并不透明，看起来它正在渲染其他元素“背后”。您是否为任何项目指定了“z-index”？

Answer 4

我有一个类似的问题，我用字段集上的z索引修复

如果你有

<fieldset> some content... including ajax popup </fieldset>
<fieldset> some more content </fieldset>

然后在第二个字段集下方弹出ajax弹出窗口，以修复第一个字段集上的z-index设置为高于第二个字段集上的z-index，即如下所示。

<fieldset style="z-index: 2;"> some content... including ajax popup </fieldset>
<fieldset style="z-index: 1;"> some more content </fieldset>

Answer 5

我找到解决此问题的唯一方法是为calendarExtender编写一些css规则。它对我有用。代码如下：

https://gist.github.com/carlosmr12/5825371

Answer 6

如果这些答案无效，可能是隐藏溢出的问题。这可以使用以下css来解决：

.ajax__scroll_none {
    overflow: visible !important;
    z-index: 10000 !important;
}

为什么我的CalendarExtender在渲染时会重叠？

6 个答案: