css - anchor 标记没有响应

Question

我的 anchor 标记在 #contentAboutMe 中没有响应(例如，我的鼠标没有响应链接作为链接)...通过研究，我发现 z-index 可能会影响这一点...但是，我注释掉了任何带有 z-index 的内容，这似乎不是问题。 有任何想法吗？我将不胜感激任何帮助。 ( anchor 在我的标记中的其他位置工作)

#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--> 

Answer 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
}

​