Ссылки не доступны для кликов из-за z-индекса

У меня есть div с абсолютной позицией на странице, которая накладывается на другой div при прокрутке. Я хочу сделать его невидимым, когда он прокручивается до определенного div.

Для этой цели я использую z-index. Я устанавливаю z-index 1 div, который я хочу скрыть, и намного выше z-index для другого div. Однако он не скрывает div. Если я установил z-index в -1, тогда он скрывается, но тогда ссылки на этом div больше не доступны для кликов. Как я могу это исправить?

Здесь мой код:

HTML:

<div class="wrap">
    <div class="up"><div class="box"><a href="#">Should hide</a></div></div>   
    <div class="down">Should be visible</div>
</div>

CSS

.wrap{
    width: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;

}
.up{
    height: 100px;   
}

.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: -1; 
}

.down{
    background: green;
    overflow: hidden;
    z-index: 200;
    height: 400px;
}

Таким образом, проблема в приведенном выше примере заключается в том, что ссылки в .box не доступны для кликов (из-за значения -ve z-index), и если я положил его положительным, он не будет скрываться за .down.

JSFiddle: http://jsfiddle.net/G2xRA/

Ответ 1

Фактически z-index работает только с position, поэтому я дал position:relative; вашему классу .down.

См. приведенный ниже CSS и DEMO.

.box{
        position: absolute;
        top: 20px;
        background: yellow;
        width: 100px;
        height: 100px;
        z-index: 1;  
    }

    .down {
        background: none repeat scroll 0 0 green;
        height: 400px;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

DEMO

Ответ 2

Для того, чтобы z-index переместился друг на друга, вы оба позиционируете оба элемента.

Лучшее описание:

Определение и использование

Свойство z-index указывает порядок стека элемента.

Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.

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

Итак, вам понадобится:

.up {
    height: 100px;
    position: absolute;
}

Ответ 3

.box{
    position: absolute;
    top: 20px;
    background: yellow;
    width: 100px;
    height: 100px;
    z-index: 1;  
}

.down{
    background: green;
    overflow: hidden;
    z-index: 2;
    height: 400px;
    position:relative;
}

Сделайте эти 2 изменения в классах. Z-index не будет работать в .down, поскольку вы не поставили позицию. И нет необходимости в -ive z-index в .box. Z-index работает как слои, элемент с z-индексом 1 будет находиться под любым элементом с более высоким z-индексом, чем 1. Для этого для работы элементы должны быть расположены.

Ответ 4

У меня была такая же проблема. Я решил это, изменив значения z-index со значением больше -1.

Я сделал передний слой 2 и позади 1, поэтому он работал.