продвигать z-index с помощью раскрывающегося меню позиционирования по более высокому div z-index

Question

У меня есть три элемента: заголовок, содержимое, нижний колонтитул

<div id="header">
 <ul id="top-nav">
  nav links & sub menus
 </ul>
</div>

<div id="content">
 .. content
</div>

<div id="footer">
 .. footer links
</div>

Я установил контент с большим z-индексом и дал ему margin-top: -100px для отображения части содержимого div над заголовком, как показано на этом скриншоте (ниже). Я также дал ul # top-nav больший z-индекс, чем #content, но не повезло.

Я хочу отобразить раскрывающееся меню при наведении на ссылки (About, Visit, Volunteer и т. Д.), Но они отображаются за содержимым div. Я знаю, что это происходит потому, что div контента имеет больший z-индекс, чем div заголовка, но возможно ли отображать навигацию по div контента, когда вы наводите курсор мыши на ссылки?

Answer 1

z-index работает только для позиционированных элементов.В этом случае вам не нужно устанавливать z-index для чего-либо.

Поместите пункт меню и его подменю в какое-нибудь полеИспользуйте для него правило :hover с position: relative;.

Пример скрипта: http://jsfiddle.net/8Ghsm/

Answer 2

См. Приведенную ниже скрипку, если я правильно понял вашу проблему

Скрипка: http://jsfiddle.net/xvdfD/8/

Демо: http://jsfiddle.net/xvdfD/8/embedded/result/

CSS:

    #header
{
    background:#999;
    height:100px;
}

#content {
    background:#ccc;
    height:100px;
    z-index:100;
    margin-top:-98px;
    border:1px solid magenta;
    color:#6F6;
}
#footer {
    background:#999;
    height:100px;
}
ul#navigation-1 {
    margin:0;
    padding:1px 0;
    list-style:none;
    width:100%;
    height:21px;
    border-top:1px solid #b9121b;
    border-bottom:1px solid #b9121b;
    font:normal 8pt verdana, arial, helvetica;
}
ul#navigation-1 li {
    margin:0;
    padding:0;
    display:block;
    float:left;
    position:relative;
    width:148px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
    padding:4px 0;
    display:block;
    text-align:center;
    text-decoration:none;
    background:#b9121b;
    color:#ffffff;
    width:148px;
    height:13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
    padding:4px 0;
    display:block;
    text-align:center;
    text-decoration:none;
    background:#ec454e;
    color:#ffffff;
    width:146px;
    height:13px;
    border-left:1px solid #ffffff;
    border-right:1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
    margin:0;
    padding:1px 1px 0;
    list-style:none;
    display:none;
    background:#ffffff;
    width:146px;
    position:absolute;
    top:21px;
    left:-1px;
    border:1px solid #b9121b;
    border-top:none;
}
ul#navigation-1 li:hover ul.navigation-2 {
    display:block;
}
ul#navigation-1 li ul.navigation-2 li {
    width:146px;
    clear:left;
    width:146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
    clear:left;
    background:#b9121b;
    padding:4px 0;
    width:146px;
    border:none;
    border-bottom:1px solid #ffffff;
    position:relative;
    z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
    clear:left;
    background:#ec454e;
    padding:4px 0;
    width:146px;
    border:none;
    border-bottom:1px solid #ffffff;
    position:relative;
    z-index:1000;
}

Answer 3

Я бы порекомендовал сделать ваш "заголовок" фоновым изображением тела - таким образом вы не столкнетесь с проблемами z-index между навигацией или контентом.Просто сделайте div настолько высокими, насколько они должны быть.

Просто поместите вашу навигацию в фактический div заголовка и стилизуйте его соответствующим образом.