Question

所以，我很难弄清楚为什么我的几个链接无法点击。我终于发现他们只需要一个'更高'的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>

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

以下链接可以很好地了解“＆＃39;层＆＃39;是可见的并与另一层重叠。这＆＃39;重叠＆＃39;将主要发生在您通过指定项目应放置在页面上的坐标来强制浏览器呈现项目的方式时。

http://www.w3.org/wiki/CSS/Properties/z-index

观察浏览器如何对HTML进行分层的便捷方式，您可以使用Google Chrome开发人员工具。在Google Chrome浏览器中打开该页面，然后右键单击相关元素并选择＆＃34; Inspect Element＆＃34;。这将为您提供该元素边界的视图。

几乎所有现代浏览器都有这个元素检查器＆＃39;功能在某处。 Firefox在他们的开发工具中也有这个功能，但也有一个花哨的工具也可以做到这一点，但在3D中：

https://developer.mozilla.org/en-US/docs/Tools/3D_View

Answer 2

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

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

Answer 3

我查看了你的代码，我看到了重叠。

你的问题是：

<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-indexes并将链接置于顶部。

如果您不清楚z-index如何在这里工作是一个很好的链接： http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

简单地说，具有较高z-index的元素位于具有较低z-index的元素之上。如果没有z-index，浏览器就会决定。

为什么我的'可点击'<img/>被覆盖（因此无法点击）？它涵盖了什么？

3 个答案: