Абсолютная позиция имеет больший z-индекс, чем фиксированное положение

У меня есть поблем с элементом, который позиционируется относительно. Проблема в том, что у меня есть заголовок с фиксированной позицией и контент, который позиционируется относительно. Если я прокручиваю содержимое, элемент помещается перед заголовком. Я пробовал с z-index, но я просто не могу заставить его работать. Я поместил z-index:999 в заголовок.

Здесь вы можете увидеть jsFiddle

Вот фотография:

Ответы

Ответ 1

z-index на относительном позиционированном элементе должен быть ниже, чем z-index элемента фиксированной позиции. Вот краткий пример:

HTML

<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>

CSS

body{
    height: 3000px;
}

#fixed{
    top: 0;
    height; 100px;
    background: green;
    width: 100%;
    position: fixed;
    z-index: 2;
}

#relative{
    position: relative;
    top: 100px;
    left: 50px;
    height: 100px;
    width: 100px;
    background: red;
    z-index: 1;
}

Рабочий пример: http://jsfiddle.net/XZ4tM/1/

Фиксация вашего примера

У шаблона заголовка есть проблема, есть два двоеточия ::, продолжающие значение свойств z-index.

  .header{
        width:960px;
        background: #43484A;
        height:80px;
        position: fixed;
        top:0;
        z-index: 9999; /* Removed extra : here */
   }

Фиксированный пример http://jsfiddle.net/kUW66/2/

Ответ 2

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

Пожалуйста, следуйте ссылка JS Fiddle

HTML

<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>

CSS

body{
    margin:0px auto;
    color:#FFF;
}
#header{
    background-color:#006666;
    width:100%;
    height:50px;
    position:fixed;
    text-align:center;
    font:bold 12px Arial, Helvetica, sans-serif;
    line-height:50px;
    display:block;
    z-index:10;
}
#content1{
    width:70%;
    height:1200px;
    margin:0px auto;
    background-color:#FFFF66;
    position:relative;
    top:50px;
    z-index:9;

}
#content2{
    width:50px;
    height:250px;
    margin:0px auto;
    background-color:#F60;
    postition:absolute;
    left:50px;
    top:50px;
}

Надеюсь, что это поможет.

Ответ 3

"Содержимое" относится к окну, а не к серому квадрату.

Вы пытались сделать этот серый квадрат position:relative?

Без HTML и CSS очень трудно понять реальную причину.

Ответ 4

   .categories li{
        position:relative;
        z-index:-1;
        list-style: none;
        float:left;
        width:310px;
        height:310px;
        color:white;
        background:#77647F;
        margin-right:10px;
   }

проверьте эту скрипту:) ЗДЕСЬ

Я изменил z-index на -1, чтобы он работал.