丰富：css中的日历定位答案

【问题标题】：rich:calendar positioning in css丰富：css中的日历定位
【发布时间】：2024-01-17 04:48:01
【问题描述】：

让我们以下面的图片为例

如您所见，在第一种情况下，日历从底部截断。我用过<rich:calendar> ... </rich:calendar>

在第一种情况下，我的panel 的height: 945px; （height 不足以调整日历），但在第二种情况下height: 1000px;。当我没有足够的面板 width 时也会出现这种情况（例如在 mobile 中）。

我不能随意更改面板的height: 945px;。

面板很简单 div 有一些高度和宽度。

P.S: 我试过 z-index: 10; 但它对我没有帮助。我无法提供 JSFIddle，因为它不支持 richfaces:calendar。我可以为此做些什么？

我正在使用 JSF 2.2 和 Richfaces 4.x。

【问题讨论】：

请加JSFiddle之类的，这样会更有帮助。
@vivekkupadhyay JSFiddle 不支持 <rich:calendar> 所以很难通过 JSFiddle 重现它。
没有你的实际情况很难给出解决方案。
但是您可以提供实际的面板（哪个面板？rich:panel、h:panelGrid 或 h:panelGroup 甚至其他东西 - 我们不知道）和来自 *.xhtml 的 rich:calendar 代码文件。我们不知道你在那里究竟设置了什么。还要写下你的 JSF 和 RF 版本。
@Emkas 面板很简单 div 有一些高度和宽度。

【解决方案1】：

rich:calendar 很简单 <table> 在 <div> 中，没有什么神奇之处。

由于您不想向我们提供代码（即使是针对多个请求；而且这里没有人想猜测），我会尝试增加标签中的 z-index：

<rich:calendar zindex="4"/>

然后用 CSS

table.rf-cal-popup { z-index: 4; }

四个是你需要的（默认值是3），但是我不知道生成的HTML，所以你可以把它增加到一个很大的数字，比如1001。z-index肯定有问题，因为@987654326 @ 总是生成完整的日历（带有日历的完整表）。

【讨论】：