0

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

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

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

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

打印屏幕

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

非常感谢。

4

2 回答 2

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具有疯狂高价值的菜单，正如您自己发现的那样。不过，我不认为这是一个可靠的解决方案，这是一种解决方法/破解方法。

于 2012-11-05T00:57:43.207 回答
0

z-index: 9999999通过将 设置为<p:outputPanel>周围的菜单而不是在菜单中设置样式属性来解决它。

于 2012-11-04T17:48:33.837 回答