html - 固定定位不改变网站宽度

Question

我网站的两个方面都有问题，这是链接 http://www.pagodamc.org 当以 1024*768 的合适分辨率查看时，页面的“赞助商”或“公告”部分没有任何重叠。(如果您调整浏览器的大小，您会看到我指的是什么到)。但是，如果您重新调整窗口大小，就会出现严重的重叠。我搜索了一下，找不到与我要找的东西相关的东西。我希望页面始终保持固定宽度，或者至少让“赞助商”和“公告”部分不会与主页重叠。我如何整合这些元素的定位？提前致谢!

这些是我的元素

#sponsors{
z-index:300;
position:absolute;
left:0px;
top:140px;
}
#alerts{
position:fixed;
right:0px;
top:80px;
width:180px;
}

Answer 1

您的案例研究问题的反面也是正确的:当屏幕太大时，它看起来也很破旧:

看来您真正想要的是一个 4 列布局:

             header
-------------------------------
Sponsors | Body | Nav | 2nd Nav`

检查这个 css layout generator

这样做可以让您省去很多麻烦，而且确实是行业标准的做法。

对于这样的布局，生成器工具会创建以下代码:也许您可以从中学习，并将其融入您自己的设计中!

.header{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #f4f4f4
}
.wrapper{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cccccc
}
.left1{
   position: relative;
   float: left;
   left: 4px;
   width: 115px;
   background-color: #ccccff
}
.left2{
   position: relative;
   float: left;
   left: 12px;
   width: 601px;
   background-color: #ccccff
}
.left3{
   position: relative;
   float: left;
   left: 20px;
   width: 115px;
   background-color: #ccccff
}
.right{
   position: relative;
   float: right;
   right: 4px;
   width: 161px;
   background-color: #ccccff
}
.footer{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cfcfcf
}
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}