Ссылка не работает в перекрывающихся Div - PullRequest
3 голосов
/ 07 июля 2011

Создание нижнего колонтитула для веб-сайта Я наткнулся на странное поведение перекрывающихся элементов Div.Вы можете увидеть пример по адресу:

http://mike.latysheva.ru/test.html

Проблема в том, что вторая ссылка не активна в IE7 и по крайней мере в некоторых версиях IE8.Отлично работает в IE9 и Firefox.

Вот код, он довольно прост (вы можете увидеть полный код в исходном коде страницы):

<div style="height: 120px; width: 200px; background: #DDDDDD; postion:relative;">
  <div style="height: 40px; padding: 10px;postion:relative;">
    <a ...[have to remove an actual link in order to post it here]>Test Link 1</a>
  </div>
  <div style="height: 40px; padding: 10px;postion:relative;">
     <a ...[have to remove an actual link in order to post it here]">Test Link 2</a>
  </div>
</div>
<div style="width:250px;height:100px; background:#777777;margin-top:-60px;position:relative;z-index: -10;"></div>

Что может быть не так с кодом?Это как-то связано с z-index: -10?Я в полном замешательстве ... Пожалуйста, помогите ...

Заранее спасибо!

Ответы [ 4 ]

2 голосов
/ 07 июля 2011

Попробуйте указать родительский элемент z-индекса: -10 div z-index: 1.

0 голосов
/ 29 февраля 2012

Это связано с порядком элементов div. Также, если вы помещаете ссылку на другой div, который содержит несколько div, оверлей нуждается в фоновом режиме. Я обычно использую прозрачный PNG. В противном случае браузер может видеть сквозь него (т.е. 7 и т. Д.).

Решение проблемы: http://jsfiddle.net/Anytech/Gr3ae/1/

0 голосов
/ 07 июля 2011

Может ли быть так, что вашим первым двум элементам div присвоено postion вместо position атрибутов? z-index для правильной работы нужны нестатические позиционированные div.

0 голосов
/ 07 июля 2011
...