相対配置されたdivはクリックできません

Question

このウェブサイトの本文は何もクリックできません。なぜ私は理解できません。

このウェブサイトの目的はlucasfilm.comのようなものでした。ヘッダーは本文の内容と重なっていて、ロゴが飛び出ているように見えます。

私はもう何もクリックしていないように見えますが、理由を理解できません。私はページ全体を含めました。私はこれを知っているので、コードがどのようにしっかりしていないかについては何も言及しません。私はちょうどこの1ページを終了したい。

サイトであるwww.aspdfilms.com

ヘッダ、ボディ、およびフッタdiv要素は、全ての位置である相対。 Zインデックスを使ってHTMLとCSSは以下のとおりです。

<div id="page"> 
    <div id="header"> 
     <div class="nav" id="navleft"> 
      <a id="services" href="aboutASPD.html"> 
       The Company 
      </a> 
      &#160;|&#160; 
      <a id="services" href="services.html"> 
       Services 
      </a> 
     </div> 
     <a id="logodiv" href="index.html"></a> 
     <div class="nav" id="navright"> 
      <a id="about" href="ourwork.html"> 
       Our Work 
      </a> 
      &#160;|&#160; 
      <a id="about" href="contactus.html"> 
       Contact 
      </a> 
     </div> 
    </div> 
    <div id="body"> 
     <div id="container"> 
      <div id="whitebody"> 
       <h2>Contact Us</h2> 

       <p>To speak with an associate or schedule a free consultation please contact ASPD Films:</p> 

       <div id="contactdiv"> 
        <div id="contactinfo"> 
         <a href="mailto:info@aspdfilms.com">info@ASPDfilms.com</a><br /> 
         NY Contact: 347-871-3456<br /> 
         LA Contact: 310-678-7878 
        </div> 

        <a href="docs/ASPD_vCard.vcf" style="float:right;"> 
         Download vCard<br /> 
         <img src="img/vcard.jpg" alt="Download vCard" /> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <span id="copyright"> 
      TM & &#169; ASPD FILMS 2011. ALL RIGHTS RESERVED. <a id="dropmain" href="http://www.dropmain.org">BROUGHT TO YOU BY DOPMAIN.ORG</a> 
     </span> 
    </div> 
</div><div id="page"> 
    <div id="header"> 
     <div class="nav" id="navleft"> 
      <a id="services" href="aboutASPD.html"> 
       The Company 
      </a> 
      &#160;|&#160; 
      <a id="services" href="services.html"> 
       Services 
      </a> 
     </div> 
     <a id="logodiv" href="index.html"></a> 
     <div class="nav" id="navright"> 
      <a id="about" href="ourwork.html"> 
       Our Work 
      </a> 
      &#160;|&#160; 
      <a id="about" href="contactus.html"> 
       Contact 
      </a> 
     </div> 
    </div> 
    <div id="body"> 
     <div id="container"> 
      <div id="whitebody"> 
       <h2>Contact Us</h2> 

       <p>To speak with an associate or schedule a free consultation please contact ASPD Films:</p> 

       <div id="contactdiv"> 
        <div id="contactinfo"> 
         <a href="mailto:info@aspdfilms.com">info@ASPDfilms.com</a><br /> 
         NY Contact: 347-871-3456<br /> 
         LA Contact: 310-678-7878 
        </div> 

        <a href="docs/ASPD_vCard.vcf" style="float:right;"> 
         Download vCard<br /> 
         <img src="img/vcard.jpg" alt="Download vCard" /> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <span id="copyright"> 
      TM & &#169; ASPD FILMS 2011. ALL RIGHTS RESERVED. <a id="dropmain" href="http://www.dropmain.org">BROUGHT TO YOU BY DOPMAIN.ORG</a> 
     </span> 
    </div> 
</div> 


    body 
{ 
    background-color:#000000; 
    color:#ffffff; 
    text-align:center; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-weight:100; 
} 
a 
{ 
    text-decoration:none; 
} 
img 
{ 
    border:none; 
    -o-border-radius: 0px 0px 15px 15px; 
    -moz-border-radius: 0px 0px 15px 15px; 
    -webkit-border-radius: 0px 0px 15px 15px; 
    border-radius: 0px 0px 15px 15px; 
    -khtml-border-radius: 0px 0px 15px 15px; 
} 
h2 
{ 
    margin-left:30px; 
    margin-top:30px; 
} 
#page 
{ 
    margin:0px auto; 
    width:1400px; 
} 
#header 
{ 
    width:1400px; height:87px; 
    margin-top:20px; 
    background-color:#ffffff; 
    background:url('img/header.png'); 
    z-index:10; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
} 
.nav  
{ 
    height:32px; 
    font-size:14px; 
    background-color:transparent; 
    margin-top:35px; 
    z-index:300; 
    letter-spacing:4px; 
} 
.nav a 
{ 
    color:#123456; 
} 
.nav a:hover 
{ 
    color:#000000; 
    text-shadow: 0 0 0.2 #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000; 
} 
#navleft 
{ 
    width:540px; 
    text-align:right; 
    float:left; 
} 
#logodiv 
{ 
    width:200px; height:80px; 
    margin-left:65px; 
    background-color:transparent; 
    cursor:pointer; 
    float:left; 
} 
#navright 
{ 
    width:480px; 
    text-align:left; 
    float:right; 
} 
#body 
{ 
    width:1400px; height:600px; 
    background-color:#736F6E; 
    top:-28px; 
    overflow:hidden; 
    text-align:left; 
    z-index:-10; 
    position:relative; 

    -o-border-radius: 0px 0px 15px 15px; 
    -moz-border-radius: 0px 0px 15px 15px; 
    -webkit-border-radius: 0px 0px 15px 15px; 
    border-radius: 0px 0px 15px 15px; 
    -khtml-border-radius: 0px 0px 15px 15px; 
} 
#container 
{ 
    width:980px; height:600px; 
    margin:8px auto; 
    background-color:transparent; 
    color:#000000; 
} 
#whitebody 
{ 
    width:980px; height:585px; 
    float:left; 
    background:#ffffff; 
} 
#whitebody p 
{ 
    margin:20px; 
} 
#contactdiv 
{ 
    width:500px; 
    margin:0 auto; 
} 
#contactinfo 
{ 
    width:250px; 
    float:left; 
} 
#footer 
{ 
    width:1400px; height:25px; 
    background-color:#000000; 
    text-align:center; 
    top:-28px; 
    position:relative; 
} 
#copyright 
{ 
    color:#777f76; 
    font-size:10px; 
} 
#dropmain 
{ 
    color:#777f76; 
} 
#dropmain:hover 
{ 
    color:#FFA500; 
} 

Answer 1

私はここで何が起こっているかわからない - zインデックスに起因すると思わ：#bodyに-10 - しかし、あなたはでそれを修正することができます：

• 除去位置：ポジションを追加
#bodyからの相対：

を＃ヘッダーからの相対（そこ＃ヘッダー上のz-indexがありますが、あなたは相対的な位置付けを追加しない限り、それは何もしません）

問題を詳細に調べるためのリンクが見つかりました。http://www.jonasknutsen.com/2011/10/09/negative-z-index-kills-links/