html - 为什么我的 'clickable' 被覆盖(因此不可点击)？它是由什么覆盖的？

Question

因此，我很难弄清楚为什么我的几个链接无法点击。我终于发现他们只需要一个“更高”的 z-index。我真的不明白为什么他们需要它才能工作。我正在弄清楚(通过谷歌研究)一些元素可以被其他元素“覆盖”。我不明白这在我的代码中是如何发生的，尤其是，我仍然对某些元素“覆盖”其他元素的整个概念感到困惑。谁能解释一下？下面分别是相关的 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>

CSS:

body
{
background-color:#000000;
margin:0;
padding:0;
font-size:100%;
width:100%;
}

main
{
display:block;
max-width:700px;
margin:40px auto 300px auto;
height:650px;
}

img
{
padding:0;
margin:0;
border:none;
float:left; /* Gets rid of space between images */
}

#don8
{
clear:left;
float:right;
position:relative;
top:50px;
width:250px;
height:140px;
border-left:13px solid red;
}

#don_P
{
width: 60px;
position:relative;
top:-10px;
left:60px;
text-align:center;
z-index:2;
}

#don_P a:link, a:hover, a:focus
{
text-decoration:none;
color:white;
}

#donate
{
position:relative;
top:-10px;
left:20px;
z-index:2;
}

#slogans
{
clear:left;
position:relative;
top:50px;
left:35px;
/* border-right: 5px solid red; */
}

.slogan
{
margin-top:0;
margin-bottom:0;
line-height:160%;
}

#slogan_5
{
margin-top:10px;
}

Answer 1

除非我遗漏了一些 CSS，否则您的链接不会被覆盖。它们的颜色在 :hover 时变为白色。

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