relative positioned divs not clickable - css

Question

Nothing in the body of this website is clickable. I can't figure out why.
The purpose of this website was to be something like lucasfilm.com, where the header overlaps the body content so the logo sorta looks like it is popping out.
For some reason I can't seem to click on anything anymore and I can't figure out why. I've included the entire page. I am knew to this so no need to go on and on about how the code is sloppy. I just want to finish this one page.
Website is www.aspdfilms.com
header, body, and footer divs are all position:relative; with z-index's. HTML and CSS are:
<div id="page">
<div id="header">
<div class="nav" id="navleft">
<a id="services" href="aboutASPD.html">
The Company
</a>
 | 
<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>
 | 
<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">
info#ASPDfilms.com<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 & © 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>
 | 
<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>
 | 
<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">
info#ASPDfilms.com<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 & © 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

I'm not sure what's happening here - it seems to be caused by z-index:-10 on #body - but you can fix it by:
removing position:relative from #body
adding position:relative to #header
(there's a z-index on #header, but that won't do anything unless you add relative positioning)
Addionally, I found a link exploring the problem more in detail: http://www.jonasknutsen.com/2011/10/09/negative-z-index-kills-links/