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

替换它：

.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 */
}

这是更新的小提琴; https://jsfiddle.net/3x00fzjf/5/

很难点击锚标签

2 个答案: