Я пытаюсь получить текстовую ссылку, чтобы появиться поверх частично прозрачного изображения, которое, в свою очередь, находится поверх простого цветного фона. Я хочу, чтобы текст ссылки и изображение печатались при печати страницы, но не цветной фон. (Вот почему я не использую свойство 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>
Ура!
Алекс
Проблема в основном вызвана отрицательными значениями z-индекса, которые, по-видимому, заставляют родительский div захватывать события мыши. Используйте положительные индексы и присвойте position:relative ссылке, чтобы получить ожидаемое поведение, потому что без явного позиционирования z-index ничего не сделает.
Две заметки:
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>
В моем случае я имел дело с необъяснимым pointer-events в CSS (в частности, значение all), что вызвало некоторые элементы чтобы поймать события, по-видимому, вызванные из другой (не-предка!) части DOM.
Я удалил все pointer-events из CSS.
Я знаю, что у этого вопроса уже есть принятый ответ, но мои симптомы соответствуют OP, поэтому, возможно, мой совет может помочь будущему боссу, подобному мне.