锚标签没有响应答案

【问题标题】：anchor tag not responding锚标签没有响应
【发布时间】：2012-09-01 06:50:15
【问题描述】：

我的锚标记在#contentAboutMe 中没有响应（例如，我的鼠标没有将链接作为链接响应）...通过研究我发现z-index 可能会影响这个...但是，我用 z-index 注释掉任何东西，这似乎不是问题。有任何想法吗？我将不胜感激任何帮助。（锚在我标记的其他地方工作）

#logo {
    position: absolute;
    top: 50px;
    left: 20px;
    /*z-index: 50;*/
}
#mainHeader > h1 {
    font-size: 18px;
}
#wrapperAboutMe {
    position: absolute;
    width: 525px;
    left: 400px;
    top: 40px;
    /*z-index: 2;*/
}
#placeHolder {
    position: relative;
}
#topAboutMe {
    background-image: url(../images/aboutTopBackground.png);
    width: 525px;
    height: 47px;
}
#contentAboutMe {
    width: 525px;
    background-image: url(../images/aboutMainBackground.png);
}
#contentAboutMe p {
    padding: 0 40px 0 40px;
    text-align: justify;
}
.firstCharacter {
    display: block;
    float: left;
    color: #155763;
    font-size: 330%;
    line-height: .5em;
    padding-top: 10px;
    padding-right: 2px;
}
#bottomAboutMe {
    background-image: url(../images/aboutBottomBackground.png);
    width: 525px;
    height: 71px;
}
#aboutImage {
    width: 220px;
    height: 45px;
    background-image: url(../images/graphicAbout_03.png);
    background-repeat: no-repeat;
    float: left;
    padding: 30px 0 0 0;
    position: absolute;
    top: -25px;
    left: -100px;
}
#aboutImage span {
    display: none;
}
#aboutBackground {
    position: absolute;
    background-image: url(../images/graphicAboutBackground.png);
    width: 462px;
    height: 125px;
    left: -260px;
    top: -110px;
    z-index: 1;
}

HTML：

<article id="aboutMe">
    <div id="wrapperAboutMe">
      <div id="topAboutMe"> </div>
      <!--End topAboutMe-->

      <div id="contentAboutMe">
        <p><span class="firstCharacter">M</span>y content</p>
        <a href="includes/HappeResumeSept2012.pdf" target="_blank">View My Resume</a>
      </div>
      <!--End contentAboutMe-->

      <div id="bottomAboutMe"> </div>
      <!--End bottomAboutMe-->

      <div id="placeHolder">
        <h1 id="aboutImage"><span>About Me</span></h1>
        <div id="aboutBackground"></div>
        <!--End aboutBackground--> 
      </div>
      <!--End placeHolder--> 

    </div>
    <!--End wrapperAboutMe--> 

  </article>
  <!--End Article_aboutMe-->

【问题讨论】：

我建议使用 :first-letter 伪元素而不是使用 span。

标签： css html anchor z-index

【解决方案1】：

带有id 或aboutBackground 的div 位于链接的顶部，因此当您尝试点击时，它实际上是针对该div 注册的，而不是链接。

要解决此问题，请将#aboutBackground z-index 更改为 -1，因此它看起来像这样：

#aboutBackground {
position: absolute;
background-image: url(../images/graphicAboutBackground.png);
width: 462px;
height: 125px;
left: -260px;
top: -110px;
z-index: -1; // this line edited
}

【讨论】：

没问题 - 很高兴能提供帮助。

【解决方案2】：

摆脱这种风格

#placeHolder {
    position: relative;
}

这会将元素置于链接顶部

【讨论】：