我正在尝试为我的网页制作标题。问题是我用绝对位置放置在左边的三个链接很难点击。就像碰撞箱很小一样。我试图增加填充,并将显示设置为阻止,但都没有用。
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;
}
最佳答案
替换这个:
.sideheader {
color: #000;
position: absolute;
top:0px;
left:-10px;
}
通过这个:
.sideheader {
color: #000;
position: absolute;
top:0px;
left:-10px;
z-index:1;
}
基本上,您添加 z-index
使其成为其他元素中的顶层,因此它再次变得可点击:)
关于html - 难以点击 anchor 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31838283/