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

【问题标题】：Why is my CalendarExtender getting overlapped when rendered?为什么我的 CalendarExtender 在渲染时会重叠？
【发布时间】：2010-09-23 01:37:32
【问题描述】：

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

我在其他页面上使用了扩展器，没有遇到这个问题。

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

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

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

【问题讨论】：

我遇到了同样的问题。在常规 Web 表单上，日历会以正确的背景弹出。在像对话框一样弹出的子窗体上，日历是透明的。我已经尝试了这里列出的每一个建议，但没有一个能解决我的问题。有人有任何额外的建议吗？我的 CSS：.MyCalendar .ajax__calendar_container { 边框：1px 实心 #646464;背景颜色：#D3DEEF；颜色：#003366；溢出：可见！重要；位置：绝对；能见度：可见；显示：块； z-index：10000； }

标签： asp.net-ajax calendarextender

【解决方案1】：

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

【讨论】：

没有在布局中指定 Z-Index，但我想知道页面上的渲染顺序是否会影响它？如果我把 Z-Index 放进去，我应该在日历上做，还是在下面的 div 标签里把它移回来？
如果不查看 HTML 并使用 calendarextend 就很难说。我可能会使用 FireBug 来玩一下，看看有什么用。

【解决方案2】：

所以再四处寻找，我发现了问题所在。部分问题源于我设置的用于创建两个单独列的 div 布局使用 position:relative 和 float:right/left 属性。

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

不幸的是，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;
}

...希望这对你有用。

【讨论】：

对我来说 .ajax__calendar_container { z-index : 1000 ; } 没有用。但是.ajax__calendar { z-index : 5000 ; } 确实有效！谢谢。

【解决方案3】：

我有一个类似的问题，我用字段集上的 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>

【讨论】：

【解决方案4】：

我发现在 IE7 中解决问题的唯一方法是向我遇到问题的页面添加一些额外的 CSS。没有多少 z-indexing 或 div 包装和重新样式有效果。

以下内容更改了控件堆叠上下文。

.ajax__calendar_container
{
    position:static;
}

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

如果这些答案不能正常工作，则可能是隐藏溢出的问题。这可以使用以下 css 解决：

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

【讨论】：