Question

我对以下内容感到难过。我刚刚在网站上添加了一个徽标，由于某种原因，我现在无法点击徽标/图片右侧的导航面板链接。似乎图像以某种方式过度使用它们，但我不知道如何。在控制台/检查中它没有显示图像过度使用？

有谁知道为什么会这样？

.header {
	margin: 0;
	background-color: rgba(0,0,0,0);
	height: 80px;
	z-index: 9999;
	position: absolute;/*test*/
	width: 100%;
}
.header_wrap {
	margin: 0 4%;
	padding: 2% 0 0 0;
}
.logo {
	position: absolute;
	margin-top: -15px;
	cursor: pointer;
}
.logo-img {
	/*height: 75px;
	width: auto;*/
	height: auto;
	width: 25%;
}
.logo a {
	color: #000;
	text-decoration: none;
}
.nav-list {
	margin: 0;
	list-style: none;
	text-align: right;
	width: 100%;
	padding: 0;
}
.nav-list > a {
	display: inline-block;
	padding: 0px 15px;
	text-decoration: none;
}
.nav-list > a > li {
	text-decoration: none;
	font-size: 1.2em;
	color: #000;
}
.nav-list > a > li:hover {
	color: #3f3f3f;
}

<header class="header">
  <div class="header_wrap">
      <div class="logo"><a href="/"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></a></div>
      <ul class="nav-list">
          <a href="work"><li>WORK</li></a>
          <a href="approach"><li>APPROACH</li></a>
          <a href="services"><li>SERVICES</li></a>
          <a href="discuss-project"><li>PROJECT</li></a>
          <a href="contact"><li>CONTACT</li></a>
      </ul>
  </div>
</header>

Answer 1

图像没有超过它们，但图像所在的<div>是。它是全宽的，所以你有一个透明的div坐在导航栏的顶部。限制徽标容器的宽度，改为使用跨度或将其作为建议浮动。

Answer 2

我不明白您是否已将position:absolute提供给徽标，但将z-index: -1;添加到.logo会使您的链接可以点击..

.header {
	margin: 0;
	background-color: rgba(0,0,0,0);
	height: 80px;
	z-index: 9999;
	position: absolute;/*test*/
	width: 100%;
}
.header_wrap {
	margin: 0 4%;
	padding: 2% 0 0 0;
}
.logo {
	position: absolute;
	margin-top: -15px;
	cursor: pointer;
  z-index: -1;
}
.logo-img {
	/*height: 75px;
	width: auto;*/
	height: auto;
	width: 25%;
}
.logo a {
	color: #000;
	text-decoration: none;
}
.nav-list {
	margin: 0;
	list-style: none;
	text-align: right;
	width: 100%;
	padding: 0;
}
.nav-list > a {
	display: inline-block;
	padding: 0px 15px;
	text-decoration: none;
}
.nav-list > a > li {
	text-decoration: none;
	font-size: 1.2em;
	color: #000;
}
.nav-list > a > li:hover {
	color: #3f3f3f;
}

<header class="header">
		<div class="header_wrap">
			<div class="logo"><a href="/"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></a></div>
				<ul class="nav-list">
					<a href="work"><li>WORK</li></a>
					<a href="approach"><li>APPROACH</li></a>
					<a href="services"><li>SERVICES</li></a>
					<a href="discuss-project"><li>PROJECT</li></a>
					<a href="contact"><li>CONTACT</li></a>
				</ul>
		</div>
	</header>

修改

其他解决方案是display: block;到.logo a会有效。的 Fiddle

Answer 3

检查图像的z-index是否低于链接的z-index。

Answer 4

您真的不需要使用position: absolute;。而是使用display:inline或inline-block并避免重叠。

你的CSS看起来像这样：

.nav-list {
  display:inline; /* Add this */
    margin: 0;
    /* width:100%;  you can remove this */
    list-style: none;
    text-align: right;
    padding: 0;
}

.logo {
    display:inline; /* add this*/
    margin-top: -15px;
    cursor: pointer;
    /* z-index: -1;  no need for z-index */
}

JsFiddle

图片覆盖链接

4 个答案: