Css分层问题

我在分层方面遇到了很多麻烦，我目前的问题是，由于某种原因，访问者无法点击div层内的链接。他们不能突出显示文本，点击侧边栏中链接的图像。我不知道怎么了。任何帮助都将不胜感激。

站点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
  <script src="js/video-js/video.js"></script>
  <script>
    _V_.options.flash.swf = "video-js.swf";
  </script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;} 
</style>
<script type="text/javascript">
function chgbg() {
var d = new Date();
var h = d.getHours();
if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
}
</script> 
</head>
<body onload="chgbg()">
<div id="Wrapper">
  <div id="navbar" style="display: inline-block;">
<ul id="nav">
    <li id="top">
        <a href="home:index.html">HOME</a>
    </li>
    <li id="top">
        <a href="#">GUIDE</a>
        <ul>
        <li id="submenu"><a href="Htdocs/classes.php">CLASSES</a></li>
        <li id="submenu"><a href="Htdocs/dungeons.php">DUNGEONS</a></li>
        <li id="submenu"><a href="Htdocs/monsters.php">MONSTERS</a></li>
        <li id="submenu"><a href="Htdocs/pets.php">PETS</a></li>
        <li id="submenu"><a href="Htdocs/races.php">RACES</a></li>
        <li id="submenu"><a href="Htdocs/town buildings.php">TOWN BUILDINGS</a></li>
        <li id="submenu"><a href="Htdocs/universe.php">UNIVERSE</a></li>
        <li id="submenu"><a href="Htdocs/wiki.php">WIKI</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">BLOG</a>
        <ul>
        <li id="submenu"><a href="Htdocs/arakion.php">ARAKION</a></li>
        <li id="submenu"><a href="Htdocs/chris taylor.php">CHRIS TAYLOR</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">MEDIA</a>
        <ul>
        <li id="submenu"><a href="Htdocs/art.php">CONCEPT ART</a></li>
        <li id="submenu"><a href="Htdocs/screenshots.php">SCREENSHOTS</a></li>
        <li id="submenu"><a href="Htdocs/videos.php">VIDEOS</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="Php/forum/index.php">FORUM</a></li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
  <div id="Sidebar_content">
    <p>&nbsp;</p>
    <p class="title">Social Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10"  class="title" /></p>
    <p><a href="http://www.indiedb.com/games/arakion" target="_new"><img src="images/IndieDBIcon.png" width="35" height="35" /></a> 
        <a href="http://www.facebook.com/Arakion" target="_new"><img src="images/FacebookIcon.png" width="35" height="35" /></a> <a href="http://twitter.com/arakiongame" target="_new"> 
            <img src="images/TwitterICon.png" width="35" height="35" /> </a> <a href="http://www.youtube.com/user/MrLavidimus" target="_new"> <img src="images/YoutubeICon.png" width="35" height="35" /> </a> </p>
    <p>&nbsp;</p>
    <p>Random Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Something</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p>&nbsp;</p>
  </div></div>
<div style="display: inline-block;" id="main_background">
  <div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
    <table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
      <tr>
        <td width="140"><img src="images/MainImages/Placeholder1.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder2.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder3.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder4.jpg"  height="100%" width="100%"/></td>
      </tr>
      <tr>
        <td width="140">How Housing Works and why we have it    <p>&nbsp;</p></td>
        <td width="140">An In depth look at the Satyr race  <p>&nbsp;</p></td>
        <td width="140">We take a look at the role the alchemist plays in a group   <p>&nbsp;</p></td>
        <td width="140">Our doors are offically open to new employees apply today   <p>&nbsp;</p></td>
      </tr>
    </table>
    <p>&nbsp;</p>
  </div></div>
<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>
<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>
 <div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"  style="z-index:9;"> 
    <video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="js/video-js/Posters/Test.png"
      data-setup="{}">
    <source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
  </video>
   <a href="index.html">Read More.</a></div></div></div>
 <div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>
<div id="footer_background" style=" text-align: center; ">
    <img src="images/Footer_Divider.png" height="10px" width="600px"/>
    <p>&nbsp;</p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
        <div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
        <div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>

CSS代码：

@font-face {
    font-family: 'KingthingsExeterRegular';
    src: url('font/kingthings_exeter-webfont.eot');
    src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/kingthings_exeter-webfont.woff') format('woff'),
         url('font/kingthings_exeter-webfont.ttf') format('truetype'),
         url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'KingthingsExeterRegular';
    overflow-y: auto;
}
body,td,th {
    font-family: KingthingsExeterRegular;
    background-size: cover;
    background-repeat:no-repeat;
    text-align: center;
    font-size: 15px;
    zoom: 110%
}
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    color: #FFF;
}
a:active {
    text-decoration: none;
}
/*Body Css */
#header{
  z-index: -999;
  width:900px ;
  height:800px ;
  position: relative;
  top:0;
  left:0;
}
#left{
  z-index:-9;
  width:239px;
  height:600px ;
  float: left;
  clear: both;
  position: absolute;
  left:-215px;
  top:150px;
}
#right{
  z-index:-2;
  width:239px;
  height:600px ;
  float:right;
  clear: both;
  position: absolute;
  left:960px;
  top:120px;
}
#Wrapper {
    width:1040px;
    margin:auto;
    margin-top:-40px;
    height:2000px;
    position: relative; 
    z-index:0;
}
/*------------------------------------*
    NAV
*------------------------------------*/
#navbar{
    position: relative;
    top:91px;
    float:left;
    margin-top:50px;
    margin-left:5px;
    width:649px;
    height: 50px;
    z-index:4;
    margin-bottom:10px;
    clear:both;
}
#nav{
    list-style:none;
    font-weight:bold;
    width:600;
    height:50;
    margin-bottom:5px;
}
#top{
    float:left;
    position:relative;
    background-image:url("images/Button_NavBar_Unselected.png");
    height:55px;
    width:119px;
    font-size:15px;
}
#top:hover{
    background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
    float:left;
    position:relative;
    height:18px;
    width:110px;
    font-size: 12px;
    text-align:center;
}
#submenu_bottem{
    float:left;
    position:relative;
    height:18px;
    width:110px;
    font-size: 12px;
    text-align:center;
}
#nav a{
    display:block;
    padding-top:20px;
    z-index:-1;
    font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px;
    text-align:center;
    width:100px;
    height:18px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{ 
    left:-30px;
    top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}
/* Main Block */
#main_background{
    width:680px;
    height:519px;
    float:left;
    background-image:url(images/MainSection.png);
}
#main_content{
    width:590px;
    height:430px;
    text-align:left;
    margin-top:20px;
    margin-left:45px;
}
#main_img{
    margin:0 auto;
    margin-top:5px;
    background-image:url(images/MainSection_BigImageHighlight.png);
    width:520px;
    height:300px;
    text-align:center;
    padding-top:4px;
}
#main_section_img{
    margin-top:10px;
    background-image:url(mages/MainSection_SmallImageInsett.png);
    width:560px;
    height:95px;
    text-align:center;
    vertical-align:top; 
    margin-top:0; 
}
#main_section_img td{
    vertical-align:top; 
    margin-top:0; 
}
/* Sub Block */
/*  Sub Background Hierarchy */
#sub_background_1{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-1;
    margin-left:30px;
    top:-38px;
    background-repeat:no-repeat;
}
#sub_background_2{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-2;
    margin-left:30px;
    top:-52px;
    background-repeat:no-repeat;
}
#sub_background_3{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-3;
    margin-left:30px;
    top:-65px;
    background-repeat:no-repeat;
}
#sub_background_4{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-4;
    margin-left:30px;
    top:-77px;
    background-repeat:no-repeat;
}
#sub_background_5{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-5;
    margin-left:30px;
    top:-83px;
    background-repeat:no-repeat;
}
#sub_background_6{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-6;
    margin-left:30px;
    top:-81px;
    background-repeat:no-repeat;
}
#sub_background_7{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-7;
    margin-left:30px;
    top:-81px;
    background-repeat:no-repeat;
}
#sub_background_8{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-8;
    margin-left:30px;
    top:-85px;
    background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
    width:580px;
    height:220px;
    margin:0 auto;
    margin-top:10px;
    clear: both;
}
#Sub_title{
    height:35px;
    width:400px;
    margin-top:30px;
    margin-left:10px;
    font-size:30px;
    text-align: left;
}
#Sub_subtitle{
    height:20px;
    width:200px;
    margin-left:10px;
    margin-top:65;
    font-size:15px;
    text-align: left;
}
#Sub_image{
    height:100px;
    width:100px;
    margin-top:10px;
    margin-left:15px;
    float:left;
}
#Sub_text{
    height:180px;
    width:400px;
    float:right;
    margin-top:5px;
    text-align: left;
    z-index:9;
    position: relative;
}
/* SideBar Block */
#sidebar_header{
    position:relative;
    height:80px;
    width:350px;
    float:right;
    background-image:url(images/Kickstarter.png);
    margin-right:5px;
    left:-20px;
    margin-top:10px;
    z-index:1;
    clear: both;
    top:1px;
}
#sidebar_banner{
    position:relative;
    height:729px;
    width:360px;
    float:right;
    background-image: url(images/Side%20Banner.png);
    left:-20px;
    z-index:-1;
    clear: both;
}
#Sidebar_content{
    margin:0 auto;
    margin-top:20px;
    text-align:center;
    font-size: 20px;
    width:300px;
    height:700px;
    line-height: 3px;
}
#Kickstarter_donationcount{
    width: 119px;
    height: 26px;
    text-align:center;
    top:8px;
    left:230px;
    background-image:url("images/Progress/GoalNumber.png");
    position: absolute;
    padding-top:6px;
}
#Kickstarter_progressbar{
    position:relative;
    top:62px;
    margin:0 auto;
    width: 310px;
    height: 18px;
    background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
        color: #000;
        font:"arial";
        font-size: 18px;
}
#Sidebar_content .title{
    line-break: 1px;
}
/* Footer */
#footer_background{
    position:relative;
    background-image:url(images/Footer.png);
    width:605px;
    height:75px;
    float:left;
    margin-left:35px;
    top:-89px;
    z-index:-9;
    line-height:1px;
    font-family:"Arial";
    font-size:12px;
}
#footer_background a:link{
    color: #000;
    text-decoration: underline;
}
#footer_background img {
    margin-top:100px;
}

Wrapper正在覆盖其他内容，所以您只想将其推到底部。将z-index: 0;添加到#wrapper。

或者您可以从#wrapper 内的div中删除z-index: -1

以后，只在帖子中发布相关代码。没有人会不厌其烦地浏览你的网站来为你解决这个问题。如果你不能将问题缩小到特定的范围，那么你需要更好地进行故障排除。

虽然sachleen的回答确实为您迫在眉睫的问题提供了解决方法，但您的页面面临着几个关键问题，这些问题很快就会成为问题。

把密码给我

这是指向您的页面的链接，该链接完全正常工作，没有任何验证问题。图像没有优化，但我不得不调整其中一个以防止一直使用z索引：

在线查看
下载文件

将这些文件与您自己的文件进行比较，看看在改进和使文档有效方面做了什么

以下是最重要的问题列表：

元素ID

元素可以有一个ID，但ID在页面上必须是唯一的，这是因为ID的目的是识别特定的元素。如果需要为多个元素提供样式，正确的方法是使用类。

来自MDN:：id

一个唯一的标识符，以便您可以使用来标识元素。您可以将其用作getElementById（）和其他DOM函数的参数，并在样式表中引用元素。
图像

虽然这更多地与性能有关，但我相信，当您当前使用的4Mb图像被下载时，该网页的访问者将不需要等待相当长的时间。

你可以使用谷歌页面速度工具，它为你提供了一个分析网页错误的工具，如果图像没有优化，分析报告上会显示一个下载优化版本的链接。
文档堆栈

这就是你提出问题的原因。您正在摆弄文档堆栈，以解决图像使用或正确标记应该解决的问题。虽然您可以在文档堆栈中自由地上下移动元素，但在跨浏览器兼容性方面，您的页面将面临问题。

文档堆栈应该用于克服小细节，或者提供一种在不强制刷新页面的情况下与用户交互的方式。不应该用于作为解决布局问题的一种方式出现的大多数元素。
文档类型

文档类型用于告诉浏览器我们应该如何解释文档，以及应该遵守哪些规则才能以您想要的方式呈现文档。

当编写的文档是HTML或XHTML时，添加Doctype声明非常重要。doctype声明必须精确（拼写和大小写）才能达到所需效果，这有时会使其变得困难。

你可以在W3c-Doctype Declarations 上阅读它
HTML标记

您的页面缺少适当的标记，这反过来会阻止浏览器以应该显示的方式显示元素。

你可以在W3C-HTML上阅读它：标记语言

此外，您还可以使用W3C验证服务来验证和识别HTML标记的问题。请记住，最近的功能没有得到正确的验证，主要是使用CSS。但这只是一小部分。

把密码给我

以下是最重要的问题列表：

相关内容

最新更新

热门标签：