Html 无法点击链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26124154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't click on link
提问by András Tóth
I've uploaded my website, so you can see how it works, and also can check the CSS there. It's not fully working, but the problem is visible. http://exampleforso.uw.hu/testvertaboraink.html
我已经上传了我的网站，所以你可以看到它是如何工作的，也可以在那里检查 CSS。它没有完全工作，但问题是可见的。http://exampleforso.uw.hu/testvertaboraink.html
My problem is that I can't click the link on the page. Anyone can help me correct my code?
我的问题是我无法点击页面上的链接。任何人都可以帮助我更正我的代码？
I'm still new to CSS, so my code might be messy or imperfect. And sorry for the language its hungarian.
我对 CSS 还是个新手，所以我的代码可能很混乱或不完美。很抱歉它的匈牙利语。
回答by Bram Vanroy
#menuwrapper {
position: absolute;
top: 212px;
right: 0;
bottom: auto; /* or just remove */
left: 0;
z-index: 1;
}
You set a top value AND a bottom value of 0, with no height. The browser will fill that space up. This means that the menu wrapper will be on top of the rest of the content, so when you think you are clicking on the link, you're actually clicking on the menu wrapper.
您将顶部值和底部值设置为 0，没有高度。浏览器将填满该空间。这意味着菜单包装器将位于其余内容的顶部，因此当您认为单击链接时，实际上是在单击菜单包装器。
You should get rid of all those position absolutes, or at least get some better z-indexing going so that the "3D" representation is correct.
您应该摆脱所有这些绝对位置，或者至少获得一些更好的 z 索引，以便“3D”表示正确。
回答by consuela
Give your menuwrapper a fixed height. Something like this:
给你的 menuwrapper 一个固定的高度。像这样的东西：
#menuwrapper {
height: 45px;
}
or remove the "z-index" that you have given to the menuwrapper.
或删除您提供给 menuwrapper 的“z-index”。
Currently, your menuwrapper has a height of 430px and along with the z-index it makes the link, unclickable.
目前，您的 menuwrapper 的高度为 430px，它与 z-index 一起使链接不可点击。
Update: Removing the "bottom" value is the right solution.
更新：删除“底部”值是正确的解决方案。
回答by Gho
The problem is your header has a height of 700px and position absolute, which means it overlaps not only your link, but you whole page, So either remove the height or the position absolute.
问题是您的标题具有 700 像素的高度和绝对位置，这意味着它不仅与您的链接重叠，而且与整个页面重叠，因此要么删除高度，要么删除绝对位置。
回答by AdityaParab
In your styletest.cssfile.
在您的styletest.css文件中。
From #menuwrapperRemove the property z-index:1;
从#menuwrapper删除属性z-index:1;
And it will work perfectly.
它会完美地工作。
What's happening here is, your div that contains that link is getting overlapped by the div with id=menuwrapper. And both those divs have z-indexproperty set to 1.
这里发生的事情是，包含该链接的 div 被 div 与id=menuwrapper. 并且这两个 div 的z-index属性都设置为 1。
Removing that from #menuwrappershould fix the problem.
删除它#menuwrapper应该可以解决问题。
You should not really play with height values as that may distort your orientation and alignment should you open that website on screen that is huge.
您不应该真正使用高度值，因为如果您在巨大的屏幕上打开该网站，这可能会扭曲您的方向和对齐方式。
回答by hair raisin
remove the bottom:0rule from your #menuwrapperCSS block. this will allow the menu wrapper to assume the correct height as dictated by its contents.
bottom:0从#menuwrapperCSS 块中删除规则。这将允许菜单包装器采用其内容指定的正确高度。
This way, you don't need to declare a specific height (which would change with things like font size, etc.) or change your z-index, which allows your menu flyouts to correctly display above the page content.
这样，您就不需要声明特定的高度（这会随着字体大小等因素而改变）或更改 z-index，这样您的菜单浮出控件就可以正确显示在页面内容上方。
