CSS z- 색인이 올바르게 스태킹되지 않음

Question

CSS z- 색인 스태킹에 문제가 있습니다.

HTML :

<ul> 
    <li><a href="#">Title 1</a></li> 
    <li class="dropMenu"><a href="#">Title 2</a> 
     <div class="containerDropDown"> 
      <ul class="menu"> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
      </ul> 
     </div> 
    </li> 
    <li><a href="#">Title 3</a></li> 
    <li><a href="#">Title 4</a></li> 
    <li><a href="#">Title 5</a></li> 
</ul> 

CSS :

li.dropMenu { 
    z-index:100; 
} 
.dropMenu:hover { 
    padding-bottom:9px; 
    border:1px solid #575a5d; 
    border-bottom:0; 
    background-color:#434749; 
    position:relative; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 10px #000; 
    z-index:100; 
} 
.dropMenu:hover a { 
    padding:0 9px; 
    color:#8f6f4d; 
} 
.dropMenu ul { 
    width:198px; 
    left:-999em; 
    padding:16px 0 0 0; 
    border:1px solid #575a5d; 
    background-color:#434749; 
    position:absolute; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 5px #000; 
} 
.dropMenu:hover ul { 
    /*top:32px;*/ 
    top:10px; 
    left:-1px; 
    z-index:20; 
} 
.dropMenu ul li { 
    display:block; 
    width:100%; 
    padding:0; 
    z-index:70; 
} 
.dropMenu:hover ul li a, 
.dropMenu ul li a{ 
    display:block; 
    padding:0 30px 22px 30px; 
    font-size:0.8em; 
    color:#d0cfcb; 
    background:transparent url("/images/background/dropDownMenu-arrow.gif") no-repeat 21px 4px; 
} 

내가 그 자식 ul보다 높은 스택 순서를 가지고 li.dropMenu을 얻을 필요가있다. Z- 인덱스를 변경하려고했지만 운이 없었습니다. 어느 솔루션을 알고 있습니까? 간단한 드롭 다운 메뉴를 만들려고하는데 어린이 UL이 항상 부모의 상단에있는 것 같습니다 li.dropMenu.

나는 아이 ul에 박스 그림자를 제공하고 있지만 항상 위에 그림자가 li.dropMenu

Answer 1

넘어 때문에 각 요소에 당신을 위해 CSS에 (static 제외) position 속성을 설정해야합니다 z-index을 사용하고 싶습니다.

Answer 2

z-index이 작동하려면 li.dropMenu을 position으로 지정해야합니다.

여기

li.dropMenu { 
    z-index:100; 
    position:relative; 
} 

더 많은 정보를보십시오

Z- 색인은 그 위치 값 절대 하나 인 고정, 또는 상대 상자의 스택 레벨을 지정한다.

http://reference.sitepoint.com/css/z-index

Answer 3

Z- 색인은 위치 결정 요소 (: 절대 위치 : 상대적 또는 위치 : 고정 위치)에서 작동한다.

Answer 4

문제는 절대 위치 요소가 가장 가까운 상위 요소를 기준으로 비 정적 (즉, 상대적, 절대적, 고정) 위치로 배치된다는 것입니다. 따라서 자녀 z- 색인은 부모 요소의 컨텍스트 내에서만 적용되며 비교 대상이 아닙니다. 해결 방법 : 장소 아이의 형제의 부모의 내용 :

<ul> 
    <li><a href="#">Title 1</a></li> 
    <li class="dropMenu"> 
     <div class="parentItemHolder"><a href="#">Title 2</a></div> 
     <div class="containerDropDown"> 
      <ul class="menu"> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
       <li><a href="#">Dolor sit amet link</a></li> 
       <li><a href="#">Lorem ipsum link</a></li> 
      </ul> 
     </div> 
    </li> 
    <li><a href="#">Title 3</a></li> 
    <li><a href="#">Title 4</a></li> 
    <li><a href="#">Title 5</a></li> 
</ul> 

는 CSS와 (주, 나는 간결 원래의 일부를 제거했습니다) :

.dropMenu { 
    position: relative; 
} 
.dropMenu:hover div.parentItemHolder { 
    padding-bottom:9px; 
    border:1px solid #575a5d; 
    border-bottom:0; 
    background-color:#434749; 
    position:relative; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 10px #000; 
    z-index:100; 
} 
.dropMenu ul { 
    width:198px; 
    display: none; /* using display: none; instead of left: -999em; */ 
    padding:16px 0 0 0; 
    border:1px solid #575a5d; 
    background-color:#434749; 
    -moz-box-shadow:0 0 5px #000; 
    -webkit-box-shadow:0 0 5px #000; 
    box-shadow:0 0 5px #000; 
} 
.dropMenu:hover ul { 
    display: block; 
    position: absolute; 
    z-index:20; 
} 

Answer 5

시작하여 의 z 인덱스 다음

당신이 형제 a 및 .containerDropDown을 대상으로, 또는 .containerDropDown를 제거하고 단지 대신 ul를 사용한다 제거.

는 당신은 추가해야합니다 부모보다 자식 Z- 인덱스 덜하게하는 것보다 훨씬 쉽다

.dropMenu>a{position:relative;z-index:2}

합니다.

: http://jsfiddle.net/filever10/TbJt3/