YUI 日历小部件的问题

【问题标题】：Problem with YUI Calendar widgetYUI 日历小部件的问题
【发布时间】：2010-03-11 09:38:02
【问题描述】：

我设法让 YUI 日历小部件正常工作。但是当它显示时，它不会“浮动”在页面上，也就是说，它会将内容推到异形。我需要它漂浮在页面上方并且不影响其他元素。

似乎没有强制日历在页面上浮动的属性。

有谁知道如何确保小部件在显示时浮动在页面上方。显示小部件的按钮位于表格内。下面是 HTML

<tr>
<td>Expiry Date</td>
<td><input name="ExpiryDate" value="" id="ExpiryDate">
         <img id="calico" src="resources/images/calendar_icon.gif" />
          <div id="calWidget"></div>
</td>
</tr>

【问题讨论】：

看来我可能必须将日历包装在一个对话框对象中才能使其漂浮在页面上。还有其他人有比这更简单的想法吗？

标签： calendar yui widget render

【解决方案1】：

设法找到解决方案。当所有其他方法都失败时.. 只需添加更多 HTML 和样式。

首先用另一个 div 包装“calWidget”（我们将给出“calPanel”的 id）。它看起来像这样。

<tr>
<td>Expiry Date</td>
<td><input name="ExpiryDate" value="" id="ExpiryDate">
         <img id="calico" src="resources/images/calendar_icon.gif" />
          <div id="calPanel">
             <div id="calWidget"></div>
          </div>
</td>
</tr>

然后使用一些简单的 CSS，“相对”的 calPanel 围绕“绝对”定位的 calWidget。您可以使用“#calWidget”CSS 中的左/右/上/下从那里设置日历的位置。

#calPanel {
    position:relative;
}

#calWidget { 
    display:block; 
    position:absolute; 
    left:0px;
    z-index:99;
}

IE7/8 和 FF3+ 中的定位似乎是一致的...希望这对您有同样的问题有所帮助...

【讨论】：