CSS z-index неправильно складывается

Question

У меня проблемы со стекированием CSS z-index.

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; 
} 

Мне нужно получить li.dropMenu, чтобы иметь более высокий порядок суммирования, чем его дочерний элемент ul. Я пытался изменить z-index, но безуспешно. Кто-нибудь знает какие-либо решения? Я пытаюсь создать простое выпадающее меню, но кажется, что дочерний UL всегда находится над родительским li.dropMenu.

Я даю тень от ребёнка ul, но, так как она всегда сверху, тень проходит над li.dropMenu

Answer 1

Вам необходимо установить атрибут position (отличный от static) в вашем CSS для каждого элемента, который вы хотите использовать z-index в.

Answer 2

Вам нужно дать li.dropMenu a position, чтобы z-index заработал.

Попробуйте

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

Подробнее здесь:

z-index указывает уровень стека блока, значение позиции которого равно единице. абсолютного, фиксированного или относительного.

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

Answer 3

Проблема, с которой вы столкнулись, заключается в том, что абсолютно позиционированный элемент размещается относительно его ближайшего предка с нестатическим (то есть относительным, абсолютным, фиксированным) позиционированием. Таким образом, ваш дочерний 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 4

начать с удаления z-индексов

тогда вы должны быть нацелены на братьев и сестер a и .containerDropDown, или удалить .containerDropDown и просто использовать ul вместо.

тогда вам просто нужно добавить:

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

что гораздо проще, чем пытаться сделать дочерний z-индекс меньше родительского.

сделал скрипку: http://jsfiddle.net/filever10/TbJt3/

Answer 5

z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).