當另一個鏈接的圖像在下面時，無法單擊帶有鏈接的固定圖像

我遇到包含鏈接的圖像問題。我有一個固定位置的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

當另一個鏈接的圖像在下面時，無法單擊帶有鏈接的固定圖像

回答

相關問題