带有图层问题的PrimeFaces菜单

Question

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

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

因此，当用户向下滚动页面时，我可以修复菜单标题。

现在的问题是某些Prime Faces组件的菜单上有图标和标题。

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

非常感谢。

Answer 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特定的）解决方法/黑客用于其他东西（如果这是“布局”相关的，开发人员最好使用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设置为疯狂的高值，就像您自己想出的那样。我不认为这是一个可靠的解决方案，这是一个太多的解决方法/黑客。

Answer 2

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