相对位置的div不可点击

本网站正文内容均不可点击。我不明白为什么。

这个网站的目的是有点像lucasfilm.com，在那里的标题重叠的正文内容，所以标志有点像它是弹出。

出于某种原因，我似乎不能再点击任何东西了，我也不知道为什么。我把整页都写进去了。我知道这一点，所以没有必要继续说代码是如何草率的。我只想把这一页看完。

网址为www.aspdfilms.com

header, body和footerdiv都是position:relative;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;
}

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

来修复它

从#body
添加位置:相对于#header

(在#header上有一个z-index，但除非你添加了相对定位，否则它不会起任何作用)

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

相关内容

最新更新

热门标签：