Question

我正试图在我的网站上将我的肖像旁边的Twitter和Facebook图像定位，但为了使定位正确，我必须使用div。问题是，当我向图像添加div并指向它的链接时，div会使图像无法被点击并转到链接。我无法摆脱div，因为它是我的图像正确定位的唯一方法。我将在下面发布一个带有代码的JSfiddle。

JSFiddle：http://jsfiddle.net/HeyItsProdigy/RVUhV/

问题区域：<div id="facebook"><a href="http://www.facebook.com"><img src="fb.png" height="101" width="101" /></a>

Answer 1

问题并不完全像你描述的那样。问题是你的定位导致你的Twitter元素与其他元素重叠，这使得它们无法点击。

遗憾的是，这不是一个简单的解决方案。我认为你将不得不重新考虑你的整个CSS结构，包括删除已弃用的<center>标签来解决这个问题。祝你好运。

Answer 2

使用z-index：

#twitter {
    position:relative;
    bottom:290px;
    left:168px;
    z-index: 1;
}
#facebook {
    position:relative;
    top:83px;
    right:168px;
    z-index: 5;
}

jsfiddle

但是，不应以这种方式使用这种类型的CSS样式。除非使用top定位元素，否则使用left，bottom，right，absolute等规则很少会用于定位。

您应该尝试使用margin和padding以及display属性来定位您的div。大部分代码都可以删除。

Answer 3

我很遗憾地告诉你，但答案是：做一个现代的HTML教程！您应该尝试Code Academy他们为初学者和中间人提供直接反馈的互动课程。你似乎陷入了一本旧的HTML 3/4书，这本书对你没什么好处。但是我对你的链接问题也得到了一个直截了当的答案：this fiddle你将图像作为背景图像包含在内，并且通过有效地使用你的类和选择器你必须编写（主要是复制+粘贴）非常少的行，如果你想要的话添加一些东西。您可以使用此CSS部分做到最多：

.socialmedia a {
    display: block; /* Because the image is probably higher than the text */
    height: 50px; /* you have to set it to block and height 50px to show the image */
    padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
    padding-top: 12px; /* center in the middle of the image */
    padding-bottom: 12px;
    text-decoration: none;
}

示例g +： CSS：

.g a {
    background: url(logo_g_50x50.png) no-repeat;
}

HTML

<li class="g"><a href="plus.google.com/meeeeee">+1 me on g+</a></li>

完成了！它更容易阅读，甚至更容易维护，以便以后重用或添加

Div使图像上的链接不可点击

3 个答案: