图片链接隐藏了它下方的链接

Question

我遇到了重叠图片链接的问题，隐藏了其下方的另一个链接。

<div id="header-first">
        <div id="logo">
          <a title="Αρχική" href="/">
            <img alt="Αρχική" src="/sites/default/files/acquia_marina_logo.png">
          </a>
        </div>
</div>

问题是此代码下方有一个链接，图像部分重叠。如何保持图像的位置，但是阻止它“隐藏”它下面的链接？在本质上，我希望“可链接”块更短，保持图像相同。

重新提出问题：

图像链接的链接区域是否与其包含的图像完全相同？

Answer 1

我不知道你是否使用花车，但这也会对它产生影响。您可以在标签

下方放置一个明确的div

Answer 2

所以基本上，你希望链接位于重叠的图像之上，对吗？ 有几种方法可以解决这个问题：

1.CSS - 绝对位置#logo - 将其从文档流中取出，并且html中的任何内容都将在它之上。绝对定位是它自己的野兽，所以如果你不熟悉它就要研究和学习它。

#logo { position:absolute; top:0px; left:0px; } //make the parent div {position:absolute} to contain the absolute div

2.确保链接位于html中的徽标后面并给它一个负的上边距以将其拉到图像上。

.link_css {margin-top:-10px; }

3.CSS z-index。此选项要求浏览器知道每个项目的位置（通常通过css定位）才能正常工作。

#logo {z-index:0}
.link_css {z-index:1}

只是一些概念，但很难在不了解您的代码的情况下推荐其中任何一个概念。猎人有一个观点：看到你的CSS会很高兴

Answer 3

也许：

#logo {
    margin-bottom:npx; /* where n = pixel value */
}