CSS3 드롭 다운 메뉴 Z- 색인 문제

CSS3 다중 레벨 드롭 다운 메뉴를 만들고 싶습니다. 인터넷에서 몇 가지 예를 발견했습니다. http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-DropdownMenu/index.html CSS3 드롭 다운 메뉴 Z- 색인 문제

내 질문 :

내가 두 번째 수준을 고칠 수
는 나는 (불행하게도 실제 사용 사례에서 잘 작동하지 않을 수 있음) 좋은 애니메이션을 가지고 있기 때문에이 일을 사용하기로 결정 어떤 식 으로든 Z- 색인 문제 (첫 번째 드롭 다운 목록의 TOP에서 애니메이션을 시작하고 그 아래에 있어야합니다. ). 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?
더 나은 CSS3 드롭 다운 메뉴가 있습니까? 난 숫자의 숫자와 함께 작동하고 멋지게 모든 해상도에 행동 것이라고 뭔가를 찾고 있는데요.

출처

2012-10-27 Atadj

z- 색인이 나타나는 것보다 더 복잡합니다. 요소가 서로 다른 "스태킹 컨텍스트"에있을 수 있습니다. 즉, Z- 인덱스가 직접 상호 작용하지 않습니다. 공통 조상에 도달 할 때까지 DOM 계층 구조의 상충되는 두 요소를 추적합니다. Z- 인덱스 할당을 시작하고 다시 작업하십시오.

가 여기에 적재 상황에 대한 기사입니다 : 아래의 예에서 https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

, #의 내용 래퍼 #nav UL 리튬을 중복 경우는 #header와 #content에 Z- 인덱스 설정을 시작합니다. 다른 CSS 및 마크 업에 따라 #nav 및 # content-wrapper를 계속 실행해야 작동 할 수 있습니다.

<div id="page"> 
    <div id="header"> 
    <div id="nav"><ul><li>etc</li></ul> 
    </div> 
    <div id="content"> 
    <div id="content-wrapper"> 
     Blah 
    </div> 
    </div> 
</div>

출처

2012-10-28 02:53:16

고마워요! 나는 이것을 해결했다. 한 가지 더 문제가있었습니다. "같은 레벨에"요소에 배경색이 지정되지 않아서'z-index'가 작동하지 않는 것처럼 보였습니다. – Atadj

z-index 속성은 요소의 스택 순서를 지정합니다. 스택 순서가 더 큰 요소는 항상 스택 순서가 낮은 요소 앞에 위치합니다.

Z 지수를 낮은 순서에서 높은 순서로 지정해보십시오. 페이지의 다른 요소가 이미 Z- 색인을 정의하지 않았는지 확인하십시오.

작동하지 않는 경우 페이지/코드를보고 싶습니다.

출처

2012-10-27 20:45:43

고마워요! 전체 코드에 대한 링크를 제공했습니다 (작동하지 않는 예제 포함). 'z-index'와'position'만으로는 잘 표시 할 수 없기 때문에 문제는'background-color '라고 생각합니다. 나는 이미 모든 것을 시험했다. – Atadj

CSS3 드롭 다운 메뉴 Z- 색인 문제

답변

관련 문제