固定定位，不改变站点宽度

问题描述

| 我在网站的两侧都有问题，这是链接http://www.pagodamc.org 以1024 * 768这样的分辨率查看时，页面的“赞助商”或“公告”部分没有任何重叠。（如果您调整浏览器的大小，则会看到我指的是什么）。但是，如果您调整窗口大小，则会出现严重的重叠。我进行了搜索，但找不到与我要找的东西相关的东西。我希望页面始终保持固定宽度，或者至少使\“ sponsors \”和\“ announcements \”部分不会与主页重叠。如何整合这些元素的位置？提前致谢！这些是我的要素

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

解决方法

通常，我会找到一个尽可能小的大小，然后用ѭ1放在我的主要内容周围，这是一个包装器div，这样，该站点就永远不会压缩到该大小以下，并且具有可扩展性（ em）。 , 个案研究问题的反面也适用：当屏幕太大时，它看起来也很烂：看来您真正想要的是4列布局：

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

看看这个CSS布局生成器这样做可以避免您头疼，而且确实是行业标准。对于这样的布局，该生成器工具将创建以下代码：也许您可以从中学习，并将其纳入您自己的设计中！

.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
}

, 您可以这样做：

html,body {
    width:1280px;
}

但是站点将非常广泛。您也可以使侧边栏非常细，并向其添加带有边距和宽度的div。但是，它们并不总是可见的。 , 您还可以将站点的宽度设为居中div内较小的内部区域的宽度，然后将左面板和右面板放置为负值

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

当然，您可以通过这种方式松开浏览器右侧的位置，以便菜单浮动。 , 您可以在身体上使用min-width，即使浏览器窗口很小，用户也可以看到侧边栏。这应该是内容和边栏的宽度。或者，您可以在不支持min-width（IE6）的浏览器的侧边栏上设置z-index。主体具有position:relative，因此要放置的侧边栏区域就是主体的大小（即使有水平滚动条也是如此）。它们以ѭ11positioned定位。 CSS：

* { margin:0; padding:0 }
body { text-align:center; min-width:800px; position:relative }
#content { width:600px; background:black; margin:0 auto; text-align:left }
#sponsors,#announcements { position:absolute; width:100px; background:gray; top:0; z-index:-1 }
#sponsors { left:0 }
#announcements { right:0 }

HTML：

<body>
    <div id=\"sponsors\"></div>
    <div id=\"content\"></div>
    <div id=\"announcements\"></div>
</body>

固定定位宽度宽度改变改变站点

固定定位，不改变站点宽度

问题描述

解决方法

相关问答