드롭 다운 메뉴가 항상 h1 아래에 표시됩니까?

Question

나는 드롭 다운 메뉴를 가지고 있으며, 가능한 모든 요소에 대해 999로 z- 인덱스를 설정했지만 드롭 다운은 항상 h1 아래에 표시됩니다.

왜 이런 일이 발생합니까?

이것은 모든 브라우저에서 발생합니다.

<ul> 
    <li><a>Menu item</a> 
     <ul> 
      <li><a>Sub item 1</a></li> 
      <li><a>Sub item 2</a></li> 
      <li><a>Sub item 3</a></li> 
      <li><a>Sub item 4</a></li> 
     </ul> 
    </li> 
</ul> 

<div id="article"><h1>Test title</h1></div> 

상기

가되는 HTML이 I 모든 <ul>'s <li>'s and <a>'s

샘플 CSS에 999 Z- 색인을 적절한 ul li ul가 display: none로 설정되고 상기 기본 display:block; 및 float: left;되는 설정 시도 사용되고 display: block;으로 ul li:hover

으로 설정하지만 하위 메뉴가 <h1>과 겹치는 경우 메뉴가 아래로 이동합니다.

메뉴는 <div id="article"> 배경색 위에 있지만 <h1>

Answer 1

z- 색인은 위치 요소 (위치 : 절대, 위치 : 상대 또는 위치 : 고정)에서만 작동합니다. 또한, Topera가 썼던 것에 덧붙여, 메뉴의 div 나 ul에 h1보다 큰 z- 인덱스 값을 부여하십시오. 코드가있는 것이 가장 좋습니다.

Answer 2

Z- 색인 텍스트 아래 999은 모든 다른 요소들에있어서, 메뉴에 있어야한다.