2

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

2 に答える 2

2

idofを使用した div はaboutBackgroundリンクの上にあるため、クリックしようとすると、リンクではなく、実際にはその 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
}

</p>

于 2012-08-31T22:47:05.723 に答える
2

このスタイルを捨てるだけ

#placeHolder {
    position: relative;
}

これにより、要素がリンクの上に表示されます

于 2012-08-31T22:50:15.200 に答える