PrimeFaces 메가 메뉴가 가운데 내용 뒤에 숨겨져 있습니다. 왼쪽 및 오른쪽 사이드 바

Question

템플릿의 헤더에 <p:megaMenu>이 표시됩니다. PrimeFaces에 도시 한 바와 링크 (기본값 일)로 나타낸 바와 같이 보여 <p:megaMenu>

<p:layoutUnit id="topPanel" position="north" size="155" collapsed="false" resizable="false" closable="false" collapsible="false" gutter="6"> 

    <span style="position: absolute; top: 90px; width: 1360px; left: 0px; bottom: 0px; overflow-y: hidden;"> 

     <p:megaMenu> 

     </p:megaMenu> 

    </span> 
</p:layoutUnit> 

는 동일하다.

마치 following처럼 보입니다.

이 메뉴가 팝업입니다

, 그것은 내용 바 ( <p:layoutUnit position="center"...> 및 스냅 샷에서 볼 수 있듯이 왼쪽 줄) 뒤에 숨겨져 있습니다.

다음 CSS 클래스를 사용해 보았습니다.

#topPanel {z-index:2 !important; } 

그러나 아무 소용이 없습니다.

해결 방법? 콘텐츠 표시 줄에 <p:megaMenu>을 표시하고 & 오른쪽 막대를 남기려면 어떻게해야합니까?

Answer 1

다음 CSS 클래스를 재정의해야합니다.

.ui-layout-north { 
    z-index: 20 !important; 
    overflow: visible !important; 
} 

.ui-layout-unit-content { 
    overflow:visible !important; 
} 

---

의이 특정한 경우에, 질문에 나타낸 바와 같이, 태그의 <span> style 특성은 다음과 같이 수정되어야한다.

<span style="position: absolute; top:90px; width:1360px; left:0px; bottom:0px;"> 

overflow-y: hidden; 속성 (불필요한)를 제거하거나 위의 CSS 클래스를 오버라이드 (override) 된 경우에도 작동하지 않습니다.