Question

我似乎无法弄清楚为什么我的超链接无效。图像应该是其他html文件的链接。如果您需要更多信息，请告诉我：我还在此处上传了文件：http://emmasteed.co.uk/new/是底部的大按钮。

<div class="largemenubutton"><a href="portfolio.html"><img src="images/portfolio.png" alt="Portfolio" border="0" /></a></div>
    <div class="largemenubutton"><a href="contact.html"><img src="images/getintouch.png" alt="Contact me!" border="0" /></a></div>
    <div class="largemenubutton"><a href="aboutme.html"><img src="images/aboutme.png" alt="About" border="0" /></a></div>

.largemenubutton {
    width:283px;
    height:259px;
    margin-top:20px;
    float:left;
    display:block;
    text-align:center;
}

Answer 1

文档位于哪个文件夹中？您的href标记表示它将在文档的当前目录中查找

例如，如果文档目录是一个目录，则使用以下语法：

<a href="../profile/portfolio.html">

或者您可以使用绝对路径：

<a href="http://example.com/somedirectory/profile/portfolio.html">

Answer 2

确保您使用a href标记中的正确路径。您正在使用：

aboutme.html

这应该意味着您的文件应该在当前目录中。

除此之外，它似乎在这里工作正常：

http://jsfiddle.net/LG2vz/

以下是其他文件路径的简要说明：

./表示当前目录

../表示当前目录的父目录，而不是根目录

/是根目录

myfile.text位于当前目录中，./myfile.text

也是如此

../myfile.text比您高出一级，/myfile.text位于您的根目录中。

修改

即使使用z-index，也不能将子元素堆叠在父元素下面。

使用z-index来维护作为兄弟姐妹的绝对定位元素的堆栈级别。

更改.mainimage中的z-index。您需要在px
之后添加-1
.mainimage { width: 850px; height: 423px; background-color:#ffffff; position:absolute; top:220px; float:left; z-index:-1px; }

将z-index添加到.largemenubutton

.largemenubutton { width:283px; height:259px; margin-top:20px; z-index: 0; float:left; display:block; text-align:center; }

Answer 3

我终于设法找到了解决这个问题的方法。我想感谢大家的答案和建议，如果没有这个，我可能永远都找不到这个解决方案。上一个div的z-index设置是我必须解决的问题。

基本上我创建了另一个div标签来包含我的大菜单按钮并将其放在前一个div的外面，该div保存了我的滑块图像，该图像设置在z-index -1，因为我希望我的图像位于上方的投影背后。然后，这允许图像上的链接起作用。

希望这有意义并帮助其他有此问题的人。

为什么我的图片超链接不起作用？

3 个答案: