当另一个链接的图像在下面时，无法单击带有链接的固定图像

我遇到包含链接的图像问题。我有一个固定位置的PNG，充当我网站的标题。此图片链接回我的主页。滚动下的是一系列缩略图，您可以点击查看完整图像。当您向下滚动时，缩略图位于标题PNG后面时，您不能再点击主页链接 - 而是点击后面缩略图的链接。当另一个链接的图像在下面时，无法单击带有链接的固定图像

我有一种感觉，它与缩略图的翻转功能有关 - 因为它也使PNG标头半透明，这是不理想的。这里是我的编码（在开始编写代码，所以道歉，第一次尝试）：

<!DOCTYPE html> 

<html> 

<head> 
<title>Daniel Lewsley</title> 
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"> 
</head> 


<body> 

<div id="header"> 
<a href="index.html"><img src="img/daniellewsley-header.png" alt="Daniel Lewsley"></a> 
</div> 

<!-- 
<div> 
<ul class="nav"> 
<li class="nav"><a class="nav" href="illustration.html">Illustration</a></li> 
<li class="nav"><a class="nav" href="design.html">Design</a></li> 
<li class="nav"><a class="nav" href="other.html">Other</a></li> 
<li class="nav"><a class="nav" href="info.html">Info</a></li> 
</ul> 
</div> 
--> 

<div id="gallerycontainer"> 
<div id="gallery"><a class="rollover" href="img/15.png"><img src="img/gallerythumb15.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/14.png"><img src="img/gallerythumb14.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/13.png"><img src="img/gallerythumb13.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/12.png"><img src="img/gallerythumb12.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/11.png"><img src="img/gallerythumb11.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/10.png"><img src="img/gallerythumb10.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/09.png"><img src="img/gallerythumb09.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/08.png"><img src="img/gallerythumb08.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/07.png"><img src="img/gallerythumb07.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/06.png"><img src="img/gallerythumb06.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/05.png"><img src="img/gallerythumb05.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/04.png"><img src="img/gallerythumb04.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/03.png"><img src="img/gallerythumb03.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/02.png"><img src="img/gallerythumb02.png" alt="Thumbnail"></a></div> 
<div id="gallery"><a class="rollover" href="img/01.png"><img src="img/gallerythumb01.png" alt="Thumbnail"></a></div> 
</div> 

</body> 

</html>

CSS：

body 
{ 
background-color:white; 
font-family:"Arial", arial, sans-serif; 
font-size:0.875em; /*16px is 1em */ 
text-align:center; 
margin:0 auto; 
padding:0; 
min-width:400px; 
} 

#header 
{ 
font-size:0; 
letter-spacing:0; 
word-spacing:0; 
background-color:white; 
position:fixed; 
/* margin:0 auto; 
width:100%; */ 
} 

ul.nav 
{ 
list-style-type:none; 
margin:5px; 
padding:0; 
overflow:hidden; 
} 
li.nav 
{ 
display:inline-block; 
} 
a.nav 
{ 
display:block; 
width:100px; 
background-color:#dddddd; 
text-decoration:none 
} 

#gallerycontainer 
{ 
padding:40px 0 0 0; 
text-align:center; 
font-size:0; 
letter-spacing:0; 
word-spacing:0; 
} 

#gallery 
{ 
background-color:black; 
width:400px; 
height:300px; 
display:inline-block; 
} 

a.rollover:hover 
{ 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
}

任何想法，我做错了吗？

来源

2013-02-21 Daniel Lewsley

您可以在CSS中设置z-index。如果将标题图像的z-index设置为-1，它将被发送到背景，并且您可以单击缩略图。

来源

2013-02-21 12:57:06 gaborsch

感谢它的工作！我其实需要的是相反的;标题和链接保持最佳状态。我只是将标题z-index +1改为。感谢您的帮助GaborSch。 – 2013-02-21 13:41:37

当另一个链接的图像在下面时，无法单击带有链接的固定图像

回答

相关问题