Трудно щелкнуть тег привязки

Question

Я пытаюсь создать заголовок для своей веб-страницы. Проблема в том, что три ссылки, слева, которые я поставил с абсолютной позицией, трудно щелкнуть. Это похоже на то, что hitbox очень мал. Я попытался увеличить заполнение и настроить отображение на блокировку, но и не работало. Code

HTML:

<div class="sideheader"> 
    <ul> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    </ul> 
</div> 

<div id="header"> 
<h3><a href="index.html">Webpage name</a></h3> 
<hr> 
<div id="navbar"> 
    <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Social Media</a></li> 
    </ul> 
</div> 

CSS:

body,html { 
    margin: 0; 
    background-color: #ffffff; 
    font-family: Verdana, Georgia, serif; 
    font-size: 14px; 
} 

.sideheader { 
    color: #000; 
    position: absolute; 
    top:0px; 
    left:-10px; 

} 

.sideheader ul { 
    color: #000; 


} 

.sideheader ul li { 
    color: #000; 
    list-style-type: none; 
    padding-top:15px; 
} 

.sideheader ul li a { 
    color: #fff; 
    text-decoration: none; 
} 



#header { 
    margin: 10; 
    background-color: #5c755e; 
    height: 120px; 
    border-radius: 5px; 
    text-align: center; 
    box-shadow: 2px 2px 2px #888888; 
} 

#header h3 a{ 
    text-decoration: none; 
    color: #fff; 

} 

#header hr{ 
    margin-top: 30px; 
    width: 400px; 
} 

Answer 1

Добавить z-index:1; в .sideheader.

.sideheader { 
    color: #000; 
    position: absolute; 
    top:0px; 
    left:-10px; 
    z-index:1; /* add this */ 
} 

Здесь вы найдете обновленную скрипку; https://jsfiddle.net/3x00fzjf/5/.

Answer 2

Заменить это:

.sideheader { 
    color: #000; 
    position: absolute; 
    top:0px; 
    left:-10px; 
} 

этим:

.sideheader { 
    color: #000; 
    position: absolute; 
    top:0px; 
    left:-10px; 
    z-index:1; 
} 

Here is the updated JSFiddle

В основном вы добавляете z-index, чтобы сделать его верхний слой среди других элементов, и, следовательно, она кликабельны снова становится :)