logo标签列表

相对定位的div无法点击

csshtmlclickable
3
这个网站上的任何内容都无法点击。我不知道为什么。
这个网站的目的是像lucasfilm.com一样，让页眉与正文内容重叠，使标志看起来像是凸出来的。
由于某些原因，我似乎不能再点击任何东西，也不知道原因。我已经包含了整个页面。我是新手，所以不用一直讲代码有多杂乱。我只想完成这一页。
网站是www.aspdfilms.com
头部、正文和底部div都是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;
}
你无法点击任何链接吗？对我来说（Safari）运行良好。 - sooper
1
检查一下你的鼠标？网站运行良好，尽管你的代码中存在一些错误。例如，你不能有两个具有相同ID的元素。 - Nix
1个回答
3
我不确定这里发生了什么事情 - 看起来是由于#body上的z-index:-10引起的 - 但您可以通过以下方式进行修复：
  • 从#body中删除position:relative
  • 在#header上添加position:relative
（#header上有一个z-index，但除非您添加相对定位，否则它不会起作用）
此外，我找到了一个链接，更详细地探讨了这个问题：http://www.jonasknutsen.com/2011/10/09/negative-z-index-kills-links/
1
+1 - 在Firefox中，负的z-index会将元素移动到<body>后面，因此无法点击。 - My Head Hurts
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接