Question

本网站正文中的任何内容均无法点击。我无法弄清楚原因。

这个网站的目的是像lucasfilm.com，其标题与正文内容重叠，因此徽标排序看起来像是弹出。

出于某种原因，我似乎无法点击任何东西，我无法弄清楚原因。我已经包含了整个页面。我知道这一点，所以不需要继续讨论代码是如何草率的。我只想完成这一页。

网站是www.aspdfilms.com

页眉，正文和页脚div都是位置：相对;用z-index的。 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

我不确定这里发生了什么 - 它似乎是由#body上的z-index：-10引起的 - 但你可以通过以下方式解决：

删除位置：相对于#body
添加位置：相对于#header

（＃header上有一个z-index，但除非你添加相对定位，否则不会做任何事情）

另外，我发现了一个更详细地探讨问题的链接：http://www.jonasknutsen.com/2011/10/09/negative-z-index-kills-links/

相对定位的div不可点击

1 个答案: