Html 为什么我的“可点击”被覆盖（因此不可点击）？它包括什么？

所以，我很难弄明白为什么我的几个链接不可点击。我最终发现他们只是需要一个更高的z指数。我真的不明白为什么他们需要这样才能工作。我通过谷歌的研究发现，一些元素可以被其他元素“覆盖”。我不明白在我的代码中是如何发生的，尤其是，我仍然对某些元素“覆盖”其他元素的整个概念感到困惑。有人能解释一下吗？下面是相关的HTML和CSS：我对其中的元素有问题

HTML:

<section id="nav_images">

<a href="scum_scoop.html" title="Info about Scum"><img id="skull" class="reflectBelow" src="ScumSkull.jpg" alt="Click for scoop" height="94" width="94"/></a>

<a href="scum_staff.html" title="Meet our Staff"><img id="staff" class="reflectBelow" src="ScumStaff.jpg" alt="Click for staff" height="94" width="94"></a>

<a href="scum_sermons.html" title="Hear some Sermons"><img id="bulbs" class="reflectBelow" src="ScumBulbs.jpg" alt="Click for sermons" height="94" width="94"></a>

</section>

<aside id="don8">

<p id="don_P"><a href="scum_donate.html" title="Click to Donate">Make a Donation to Scum</a></p>

<a href="scum_donate.html" title="Click to Donate"><img id="donate" src="donate.gif" alt="Donate button" height="47" width="147"></a>

</aside>


<aside id="slogans">

<h3>Top Five Rejected Scum of the Earth Slogans</h3>

<p  id="slogan_5" class="slogan">5. Emerging from the emergent church</p>

<p class="slogan">4. Our congregation can kick your congregation's ass</p>

<p class="slogan">3. Same old evangelical crap, different package</p>

<p class="slogan">2. Come to see the crazy bathrooms, stay for a sermon</p>

<p class="slogan">1. And you thought mega-churches sucked</p>

</aside>

---

下面的链接显示了当“层”可见并与另一层重叠时的外观。这种“重叠”主要发生在您通过指定项目应放置在页面上的坐标强制浏览器呈现项目的方式时

一种观察浏览器如何分层HTML的便捷方法是，您可以使用Google Chrome开发工具。在Google Chrome浏览器中打开页面，然后右键单击相关元素并选择Inspect element。这将为您提供该元素边界的视图

几乎所有现代浏览器都有“元素检查器”功能。Firefox在其开发工具中也有这一功能，但也有一个奇特的工具可以实现这一功能，但在3D中：

---

除非我遗漏了一些CSS，否则你的链接不会被覆盖。它们的颜色变为白色：悬停

#don_P a:link, a:hover, a:focus { color: white; }

---

我看过你的代码，我看到了重叠

你的问题是：

<aside id="slogans">
<h3>Top Five Rejected Scum of the Earth Slogans</h3>
<p  id="slogan_5" class="slogan">5. Emerging from the emergent church</p>
<p class="slogan">4. Our congregation can kick your congregation's ass</p>
<p class="slogan">3. Same old evangelical crap, different package</p>
<p class="slogan">2. Come to see the crazy bathrooms, stay for a sermon</p>
<p class="slogan">1. And you thought mega-churches sucked</p>
</aside>

出现在

<aside id="don8">
<p id="don_P"><a href="scum_donate.html" title="Click to Donate">Make a Donation to Scum</a></p>
<a href="scum_donate.html" title="Click to Donate"><img id="donate" src="donate.gif" alt="Donate button" height="47" width="147"></a>
</aside>

这是一个类比。想象一下，如果你有两张纸叠在一起。当你把你的钢笔放在他们身上时，它只会碰到上面的那支

这与鼠标指针相同。单击页面时，单击顶部元素。在您的情况下，顶部元素不是链接，因此您不能单击它

这个问题有两种解决方案

限制重叠对象的宽度，使其不再重叠

为元素指定z索引，并将链接放置在顶部

如果您不清楚z索引是如何工作的，这里有一个很好的链接：

---

简言之，z指数较高的元素位于z指数较低的元素之上。如果没有z-index，则由浏览器决定。

我不知道这是否会产生影响，但这里是JSfiddle上的完整HTML和CSS：感谢提供的资源。我还是迷路了。在我将z索引“2”添加到捐赠和don_P之前，它们对我来说是可见的，但显然对浏览器或其他东西来说是不可见的，因为我无法单击它们。所以，有什么东西覆盖了他们。我只是不知道你会发现什么，或者你会如何发现，这样你就可以确保给他们一个更积极的z指数，这样他们就会超越其他人，成为链接。我无法通过使用Inspect元素来理解这一点。我已将一些截图上传到imgur.com：注意，我在前两张图像中突出显示了“标语”，在第三张图像中突出显示了“don8”。突出显示“标语”一直延伸到页面的末尾。虽然Chrome允许我点击右边的链接，但是由于“aside”标签的覆盖，其他一些浏览器可能不尊重这一点，并且可能会阻止你点击右边的链接。

<aside id="don8">
<p id="don_P"><a href="scum_donate.html" title="Click to Donate">Make a Donation to Scum</a></p>
<a href="scum_donate.html" title="Click to Donate"><img id="donate" src="donate.gif" alt="Donate button" height="47" width="147"></a>
</aside>