有图层问题的 PrimeFaces 菜单答案

【问题标题】：PrimeFaces menu with layer issues有图层问题的 PrimeFaces 菜单
【发布时间】：2012-10-24 01:07:50
【问题描述】：

我在 xhtml 模板中有一个 <p:menubar>。围绕它的 div 具有以下 CSS 属性：

position: fixed;
top: 44px;
width: 100%;

所以我可以在用户向下滚动页面时修复菜单标题。

现在的问题是一些 Prime Faces 组件的图标和标题溢出菜单。

我尝试使用 z-index 但没有成功。我想在 PrimeFaces 中还有另一种解决方案，而不是 z-index。

非常感谢。

【问题讨论】：

标签： java css jsf-2 primefaces

【解决方案1】：

根据 PrimeFaces 默认样式表primefaces.css，<p:message(s)> 图标是相对定位的。

.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
    background: url("/omnifaces/javax.faces.resource/messages/messages.png.xhtml?ln=primefaces") no-repeat;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}

首先我不确定为什么它是相对定位的，因为它似乎不需要被抵消，也没有任何绝对定位的孩子。也许它已被用作某些（很可能是 IE 特定的）解决方法/hack 来解决其他问题（如果这是“具有布局”相关的，开发人员最好使用 overflow: hidden 来代替）。因此，只需将其设为默认 position: static 即可修复它。

将以下内容添加到您的覆盖样式表以实现此目的：

.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
    position: static;
}

或者，您当然也可以将菜单的z-index 设置为疯狂的高值，正如您自己发现的那样。不过，我不认为这是一个可靠的解决方案，这是一种解决方法/破解方法。

【讨论】：

我唯一关心的是更改 Prime Faces 默认样式，因为它将适用于所有页面。即使那些没有任何菜单或类似的东西。但我会采用这个解决方案来避免变通方法。 :) 谢谢@BalusC！

【解决方案2】：

通过将z-index: 9999999 设置为环绕菜单的<p:outputPanel> 而不是在菜单中设置样式属性来解决此问题。

【讨论】：