Ссылка, использующая z-index, не может быть нажата, даже если она сверху, как в Firefox, так и в IE

Я пытаюсь получить текстовую ссылку, чтобы появиться поверх частично прозрачного изображения, которое, в свою очередь, находится поверх простого цветного фона. Я хочу, чтобы текст ссылки и изображение печатались при печати страницы, но не цветной фон. (Вот почему я не использую свойство background-image)

Проблема заключается в том, что хотя ссылка появляется поверх изображения, и изображение появляется поверх фона по желанию, ссылку не может быть нажата. Мне кажется, что если ссылка появляется сверху, она должна быть восприимчива к событиям мыши...

Это происходит, по крайней мере, в следующих браузерах: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows) и Internet Explorer 7.

Пожалуйста, скажите, пожалуйста, если это проблема с моим HTML/CSS или с браузерами?

Вот несколько HTML, чтобы продемонстрировать проблему:

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

      <a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>

    </div>

  </body>

</html>

Ура!

Алекс

Ответ 1

Проблема в основном вызвана отрицательными значениями z-индекса, которые, по-видимому, заставляют родительский div захватывать события мыши. Используйте положительные индексы и присвойте position:relative ссылке, чтобы получить ожидаемое поведение, потому что без явного позиционирования z-index ничего не сделает.

Ответ 2

Две заметки:

1) Атрибут z-index может использоваться только для позиционированных элементов (абсолютный, относительный или фиксированный). Ваш элемент отсутствует.

2) [Отредактировано: не относится] Ваш верхний элемент (с z-index: 0) находится внутри вашего фонового элемента (с z-index: -2).

Следующие работы, вы можете играть с ним по адресу: http://jsfiddle.net/5MpFn/

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  



    </div>

      <div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
      <a href="#" style="color:#fff;">Can you click me?</a>      
      </div>

  </body>

</html>

Ответ 3

В моем случае я имел дело с необъяснимым pointer-events в CSS (в частности, значение all), что вызвало некоторые элементы чтобы поймать события, по-видимому, вызванные из другой (не-предка!) части DOM.

Я удалил все pointer-events из CSS.

Я знаю, что у этого вопроса уже есть принятый ответ, но мои симптомы соответствуют OP, поэтому, возможно, мой совет может помочь будущему боссу, подобному мне.