我在相对<div>s的分层方面遇到了几个问题。现在的问题之一是，当你放大时，它会把所有东西都搞砸，我想做的是在包装层下有两个相关的层。但每次我尝试这样做时，即使在使用z-index时，它也会把一切都搞砸。那么，这两个问题都有解决方案吗？索引代码：
<!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="font/stylesheet.css" rel="stylesheet" type="text/css" />
<head>
<style type = "text/css">
body,td,th {
font-family: KingthingsExeterRegular;
background-size: cover;
background-repeat:no-repeat;
text-align: center;
font-size: 13px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<img src="images/Backgrounds/Left.png" name="left" width="192" height="533" style="float:left; z-index:-9999; position:relative;" />
<img src="images/Backgrounds/Right.png" width="191" height="530" style="float:right; z-index:-9999; position:relative;" />
<div id="Wrapper">
<div id="navbar" style="display: inline-block;">
<ul id="nav">
<li id="top">
<a href="#">HOME</a>
</li>
<li id="top">
<a href="#">GUIDE</a>
<ul>
<li id="submenu"><a href="#">CLASSES</a></li>
<li id="submenu"><a href="#">DUNGEONS</a></li>
<li id="submenu"><a href="#">MONSTERS</a></li>
<li id="submenu"><a href="#">PETS</a></li>
<li id="submenu"><a href="#">RACES</a></li>
<li id="submenu"><a href="#">TOWN BUILDINGS</a></li>
<li id="submenu"><a href="#">UNIVERSE</a></li>
<li id="submenu"><a href="#">WIKI</a></li>
</ul>
</li>
<li id="top">
<a href="#">BLOG</a>
<ul>
<li id="submenu"><a href="#">ARAKION</a></li>
<li id="submenu"><a href="#">CHRIS TAYLOR</a></li>
</ul>
</li>
<li id="top">
<a href="#">MEDIA</a>
<ul>
<li id="submenu"><a href="#">CONCEPT ART</a></li>
<li id="submenu"><a href="#">SCREENSHOTS</a></li>
<li id="submenu"><a href="#">VIDEOS</a></li>
</ul>
</li>
<li id="top">
<a href="#">FORUM</a></li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><img src="images/Progress/KickstarterGoalBar_0.png" width="310" height="80"/></div>
<div style="display: inline-block;" id="sidebar_banner">
<div id="Sidebar_content">
<p> </p>
<p>Social Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p><a herf="#" target="_new"><img src="images/KickstarterIcon.png"/></a> <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> </p>
<p>Random Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
<p> </p>
<p> </p>
<p>Something</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </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-left: 15px;">
<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>
</table>
<center>
<table width="561" border="0">
<tr>
<td width="140">How Housing Works and why we have it</td>
<td width="140">An In depth look at the Satyr race</td>
<td width="140">We take a look at the role the alchemist plays in a group</td>
<td width="140">Our doors are offically open to new employees apply today</td>
</tr>
</table></center>
<p> </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"> Ut 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"> 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_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"> Ut 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> </p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY <a href="http://seanwhall.daportfolio.com/" target="_blank">SE</div>
Css代码：
@font-face {
font-family: 'KingthingsExeterRegular';
src: url('kingthings_exeter-webfont.eot');
src: url('kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
url('kingthings_exeter-webfont.woff') format('woff'),
url('kingthings_exeter-webfont.ttf') format('truetype'),
url('kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'KingthingsExeterRegular';
}
#full-screen-background-image {
z-index: -999;
width:900px ;
height:800px ;
position: absolute;
top:0;
left:0;
}
/*Body Css */
#Wrapper {
width:1040px;
margin:auto;
margin-top:200px;
z-index:5;
position:relative;
}
#left{
position:relative;
float:left;
z-index:!important -9;
}
#right{
position:relative;
float:right;
z-index:!important -9;
}
/*------------------------------------*
NAV
*------------------------------------*/
#navbar{
position: static;
top:5px;
float:left;
margin-top:30px;
margin-left:5px;
width:650px;
height: 50px;
z-index:4;
margin-bottom:10px;
}
#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:120px;
margin-bottem:5px;
font-size:15px;
}
#top li:hover{
}
#submenu{
float:left;
position:relative;
height:20px;
width:100px;
font-size: 12px;
}
#nav a{
display:block;
padding-top:20px;
z-index:-1;
font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#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 a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
}
#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(../images/MainSection_SmallImageInsett.png);
width:560px;
height:95px;
}
/* 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;
}
#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:10px;
text-align: left;
}
/* 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;
}
#sidebar_header img {
margin-top:61px;
height:18px;
width:310;
}
#sidebar_banner{
position:relative;
height:729px;
width:360px;
float:right;
background-image: url(../images/Side%20Banner.png);
left:-20px;
z-index:-1;
}
#Sidebar_content{
margin:0 auto;
margin-top:20px;
text-align:center;
font-size: 20px;
width:300px;
height:700px;
line-height: 3px;
}
/* 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:10px;
}
#footer_background img {
margin-top:100px;
}
网站现在的样子，基本上就是当你放大时会发生的事情。这也是当我试图将两个图像添加到两个相对的div层中时会发生。网站：https://dl.dropbox.com/u/49665279/Arakion/index.html任何帮助都将不胜感激。
我刚刚经历了一个问题的结束和重新开始。我学到的最好的教训是，我建议你把这个问题写得更简洁。考虑进行编辑，删除多余的代码，只关注您的问题。然而，我将试图提供一个答案。
据我所知，你所指的两幅图像就是背景中的图像。当你已经固定了所有页面元素的宽度时，你可以做以下操作：
创建一个包含左右两边的图像，中间有所需的空白。（缺点是图像中包含空白，这是浪费）。
然后将以下内容添加到body元素的css中：
background: url('url/to/your/new/twoimage.jpg');
background-repeat: no-repeat;
快速搜索"固定布局与流动布局"应该会对定义宽度有所帮助。
使用safari，页面永远不会停止加载。我推荐萤火虫http://getfirebug.com/它是检查网页问题的绝佳工具。请随时提出更具体的问题