0

私は<p:menubar>xhtmlテンプレートを持っています。それを囲む div には、次の CSS プロパティがあります。

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

そのため、ユーザーがページを下にスクロールしているときにメニュー ヘッダーを修正できます。

現在の問題は、一部の Prime Faces コンポーネントのアイコンとヘッダーがメニューからはみ出していることです。

プリントスクリーン

z-index で作業しようとしましたが、成功しませんでした。z-index の代わりに PrimeFaces に別の解決策があると思います。

どうもありがとう。

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 固有の) 回避策/ハックとして使用されている可能性があります (これが「レイアウトを持っている」関連である場合、開発者は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 に答える