Проблема CSS: ссылки на странице становятся неактивными, когда другой элемент позиционируется как «абсолютный»

Question

Это длинная история, которую я пытаюсь оборвать. Обычно я играю с меню веб-сайта, которое должно частично скользить под частично прозрачным фоновым GIF-изображением и полностью раскрываться только при наведении мыши. Для этого я использую параметр z-index как на фоновом изображении, так и в меню. Но так как вы не можете использовать z-index на фоновом изображении тела, я использую «обычное» изображение, которое я устанавливаю на 100% ширины и высоты - И чтобы работал параметр z-index, мне нужно указать «позицию», а также. Похоже, что с помощью этого комбо я в основном создаю невидимый щит, который сделает все ссылки неприкосновенными. Я приготовил это до следующих строк:

<style>
#style {
    position: absolute;
    width:100%;
    height:100%;
}
</style>

<div id="style"></div>
<a href="">test</a>

Если вы попробуете это, вы увидите, что ссылка «тест» недоступна (кросс-браузер).

У кого-нибудь есть идеи, как мне это решить? Спасибо!

Answer 1

<style>
#style {
    background-color:#ccc;
    position: absolute;
    width:100%;
    height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>



<div id="style"></div>
<a href="#">test</a>

Answer 2

Я думаю, что установка z-index, хотя это может сработать, на самом деле не решает проблему, а является своего рода хаком, который достигает того, что вы хотите.

Основная причина не кликабельных ссылок - это в основном элемент, который неправильно позиционируется через свойство floating, display, or position.Этот элемент отображается на переднем плане вашей ссылки, создавая щит, который не позволяет вам щелкнуть ссылку.

Решение, которое я нашел, состоит в использовании javascript/jquery до console.log или alert id или class элемента на переднем плане при нажатии.

$('*').click(function (){
   alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id')); 
});

выше будет оповещать элемент на переднем плане.Теперь, когда вы знаете причину, посмотрите на ее стиль.

Answer 3

Спасибо за ответы, которые указали мне в правильном направлении. Кажется, что div действительно создает невидимый щит, и этот щит (более или менее) непроницаем, когда речь идет о базовых ссылках.

Перейдите через DIV к базовым элементам

@ Логан: Боюсь, этот подход не работает для меня. Вы предлагаете просто поднять ссылку над защитным экраном - это, однако, противоречит первоначальной цели, которую я описал выше (та, в которой фоновое изображение и меню скользят под ним).

@ campino: я думал, что это все, но добавление определения z-index в "style" снова сломало его. Тот факт, что вы окрасили все поле div, помог мне понять то, что вы уже очевидно знали: пока div находится по ссылке, он не активен, точка.

В общем, я пришел к выводу, что мой подход не работает. Для реального проекта я, вероятно, разделю свое асимметричное фоновое изображение на несколько частей, чтобы div не покрывал весь экран, а только там, где он мне абсолютно необходим.

Answer 4

<style>
#style {
    position: absolute;
    width:100%;
    height:100%;
    z-index: -1;
}

.test {
    z-index: 99;
}
</style>

<div id="style"></div>
<a href="" class="test">test</a>

Также сработает вместе с ответом campino2k.