Question

所以我有一个内容框和这个菜单框..现在，当浏览器处于正常的全尺寸时，菜单框会移动，如果你改变了浏览器的大小......

这是图片： http://img12.imageshack.us/img12/827/whyw.png http://img12.imageshack.us/img12/827/whyw.png

我做错了什么？

这是我的代码：

#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
}

#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
}

Answer 1

您可能想要了解绝对定位与相对。绝对将告诉浏览器，无论窗口大小如何，某个项目都将显示在同一位置。我认为这是造成你问题的原因。

请点击此处了解更多详情：

http://webdesign.about.com/od/advancedcss/a/aa061307.htm

希望这有帮助！

Answer 2

如果您想使用position:absolute，则必须将父级设为position:relative。这是因为position:absolute相对于定位的最后一个父位置。默认情况下，它是您的body元素。这意味着您的块将相对于正文设置，这就是为什么当您调整浏览器大小时，您的块将从初始位置移开。

如果您使用position:relative设置父级，则您的区块将相对设置。您只需设置顶部/底部和/或左/右坐标。

这样的事情可以解决问题：

#menu {
position: absolute;
background: #FFF;
text-decoration: none;
border: 1px solid #000;
color: #000;
padding-left: 14px;
padding-right: 14px;
margin: 12px;
top: 50px;
right: -10px;
}

#content {
margin: auto;
width: 800px;
border: 1px solid #000;
padding: 10px;
position: relative;
}

CSS和位置问题很少

2 个答案: