Блог

Главная - Вопросы по программированию - z-индекс не соблюдается

z-индекс не соблюдается

#css #z-index

#css #z-индекс

Вопрос:

У меня есть эти стили:

 header{
   width:400px;
   min-height:640px;
   background:#9B9B76;
   float:left;
   z-index:1000;  /*high*/
}
nav{
   width:100%;
   z-index:1001;  /*highest*/
}

nav a{
   float:left;
   width:80%;
   padding:10%;
   font-size:20px;
}
nav a:hover{
   background:#997548;
}
.LevelCnt_1{
    float:left;
    width:300px;
    z-index:1;       /*Lowest*/
    position:absolute;
    left:400px;
    background:#baafa9; 
}

проблема в том, что визуально.LevelCnt_1 остается в верхней части заголовка, если я установил left:0px

почему это происходит?

Комментарии:

1. попробуйте поместить position:relative в заголовок

2. z-index работает только при позиционировании элемента. Попробуйте добавить оператор position в CSS и посмотрите, что получится.

Ответ №1:

z-index работайте только с position relative, absolute amp; fixed . Итак, передайте position:relative вашему header amp; nav DIV .

Вот так

 header{
   width:400px;
   min-height:640px;
   background:#9B9B76;
   float:left;
   z-index:1000;  /*high*/
position:relative
}
nav{
   width:100%;
   z-index:1001;  /*highest*/
position:relative
}