难以点击锚标签

Question

我正在尝试为我的网页制作 header。问题是我用绝对位置放置在左边的三个链接很难点击。就像碰撞箱很小一样。我试图增加填充，并将显示设置为阻止，但都没有用。 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

替换为：

.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 使其成为其他元素中的顶层，因此它再次变得可点击:)

Answer 2

将 z-index:1; 添加到 .sideheader。

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

此处更新fiddle； https://jsfiddle.net/3x00fzjf/5/.

难以点击锚标签

Hard to click anchor tag

html

css

anchor