带有图层问题的PrimeFaces菜单

我在xhtml模板中有<p:menubar>。围绕它的div具有这些CSS属性：带有图层问题的PrimeFaces菜单

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

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

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

printscreen

我试过用z-index，但没有成功的工作。我想在PrimeFaces中有另一种解决方案，而不是z-index。

非常感谢。

来源

2012-11-03 Adriano Castro

根据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与疯狂的高价值，你想通了你自己。我不认为这是一个可靠的解决方案，但这是一个太多的解决方法/破解。

来源

2012-11-05 00:57:43 BalusC

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

通过将z-index: 9999999设置为<p:outputPanel>来解决该问题，而不是在菜单中设置style属性。

来源

2012-11-04 17:48:33

带有图层问题的PrimeFaces菜单

回答

相关问题