YUI日历小部件的问题

Question

我设法让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>

Answer 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，“relative”calPanel包裹着“绝对”定位的calWidget。您可以使用“#calWidget”CSS中的左/右/上/下来从那里定位日历。

#calPanel {
    position:relative;
}

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

IE7 / 8和FF3 +中的定位似乎是一致的...希望如果你有同样的问题，这会有所帮助......