звено в <header> не кликабельны

Я следующая проблемазвено в <header> не кликабельны

Если я ставлю интерактивными изображение в моем заголовке, вы не можете щелкнуть по нему. (или общая связь, оба не работают)

Когда я пытаюсь переставить изображение, за пределами header - он работает. Но когда он все еще находится в header, вы не можете щелкнуть по нему.

header { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 80px; 
 
    background-color: #454d58; 
 
    margin: 0 auto 0 auto; 
 
    z-index: -10; 
 
    min-width: 100%; 
 
} 
 
li { 
 
    position: absolute; 
 
    top: 25px; 
 
}

<body> 
 
    <header> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
LINK 
 
</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 
</body>

источник

2017-01-10 L4rs

Вы имеете отрицательный z-index на вашем header, изменить его к положительному или удалить его.

z-index отрицательное становится ниже в сложенной порядке контекста, так что вы не сможете нажать на него

header { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 80px; 
 
    background-color: #454d58; 
 
    margin: 0 auto; 
 
    z-index: 1; /*whatever you need - want here - or just remove it */ 
 
    min-width: 100%; 
 
} 
 
li { 
 
    position: absolute; 
 
    top: 25px; 
 
}

<body> 
 
    <header> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
LINK 
 
</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 
</body>

источник

2017-01-10 15:57:12 dippas

По умолчанию все элементы HTML установлены в z-index: 0;. Итак, тело HTML также находится на z-index:0;.

И когда вы устанавливаете z-index:-10, он помещает заголовок позади самого тела. и, следовательно, не кликабельны, включая его дочерние элементы т.е. ссылки

Изменение z-index: -10; в z-index: 0;

header { 
 
position: relative; 
 
width: 100%; 
 
height: 80px; 
 
background-color: #454d58; 
 
margin: 0 auto 0 auto; 
 
z-index: 0; 
 
min-width: 100%; 
 
} 
 

 

 
li { 
 
position: absolute; 
 
top: 25px; 
 
}

<body> 
 
<header> 
 
<ul> 
 
<li> 
 
<a href="#"> 
 
LINK 
 
</a> 
 
</li> 
 
</ul>  \t \t \t \t 
 
</header> \t 
 
</body>

источник

2017-01-10 15:57:34

Не знаю, почему вы говорите, что:

z-index: -10;

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

источник

2017-01-10 15:57:53 wdika

звено в <header> не кликабельны

ответ

Смежные вопросы