Полноэкранный минус якорь Z-индекса не кликабелен - PullRequest
2 голосов
/ 20 апреля 2011

Проблема

Я использую jQuery supersized для полноэкранного фонового изображения, которое будет рекламным кликом.Над основным содержанием в разметке я использую тег привязки, фиксированное положение, z-индекс -1, блок отображения и высоту / ширину 100%.Все, что работает отлично, проблема в том, что при применении z-индекса «кликабельность» этого тега привязки исчезает.

У кого-нибудь есть идеи?Я мог бы использовать 2 тега привязки, позиционировать их как абсолютные по отношению к основному контенту и выдвигать их в каждую сторону, однако я не уверен, как обычно применяется этот эффект.

Ответы [ 2 ]

4 голосов
/ 20 апреля 2011

Чем ниже z-индекс, тем ниже он в контексте стека.

Помещение -1 на якорь теоретически поместит его под элементом с z-индексом 0, и поэтому вы можете потерять способность щелкать по этой причине.

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

Справочник по контекстам стека: TimKadlec.com - Подробный обзор стеков в CSS

обновление

Немного быстрой игрывокруг обнаруженного z-индекса -1 на якоре:

  • и ничего больше на странице - делает его недоступным для клика в Chrome.
  • только с одним другим элементом на странице - якорь стал недоступен для клика в Chrome и Firefox (но не в IE8)

... так что я бы советовал против отрицательного z-индекс.Увеличьте его до 0 и установите z-index на 1 для братьев и сестер и посмотрите, работает ли это.

0 голосов
/ 20 апреля 2011

Даже если некоторые из ваших элементов могут иметь невидимые фоны, вы все равно не можете просмотреть их. Сначала вы должны выбрать набор элементов, который не приведет к клику по объявлению. Все они должны быть родственными элементами вашей рекламы или их детьми. Теперь, если вы установите для них значение background-color:red, клики пользователя не будут вызывать показ вашего объявления (это, конечно, просто визуализация). Теперь вы можете установить z-индекс вашего объявления на -1, если необходимо.

Впоследствии вам может понадобиться поставить position:relative на родительский элемент всех этих элементов, а не на положительный.

Существует небольшая вероятность, что тег body может помешать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...