我不确定如何使用 css 定位元素，因为当我使用如下方法时，每当我调整浏览器大小时，元素都停留在同一个位置，而不是我希望它们在调整后的文档中的位置。你能告诉我我做错了什么吗？!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
请来一把 fiddle - http://jsfiddle.net/hHGRc/
最佳答案
在 (X)HTML DOM 中，CSS 识别四种类型的定位。默认情况下，HTML 中的每个元素都是静态定位的。这意味着它根据它在正常流中出现的位置进行定位。
相对定位
当对象被定位时 relative ，这意味着它根据原点修改位置，原点是它在正常流(静态)中的位置。然而，Relative 还做了一些特别的事情，它告诉浏览器它的所有子元素都将根据这个元素定位，无论是使用 relative 还是 absolute。
绝对定位
当对象被定位时 absolute , 根据其最近的非 static 的位置放置定位的祖先。如果没有，则使用 <body>以确定其位置。如果其 sibling 或祖先未定位，这有可能破坏文档流 absolute .如果都定位absolute从最外层的top节点到当前节点，则保持流向。
固定定位 这会将元素从流中取出并根据 Window 对象定位对象。这意味着无论文档的滚动状态、大小或任何其他属性如何，它都将始终出现在该位置。 (这就是您获得随您滚动的对象的方式)。
针对您的问题的多种解决方案
首先，正如其他人所描述的，您可以添加 position:relative到 #header .如上所述，它将使您的标题最接近非 static祖先并将使用它和确定位置的基础。这可能不适合您，因为您是一名新手，而这个absolute很容易打断足够多的流程，以至于您可能会与兄弟元素作斗争。
作为替代方案，您可以将 Logo 从 position:absolute 更改为至 position:relative .这将使您的 Logo 保持在文档流中，但会根据它在文档流中自然出现的位置移动 Logo 。除非您在#header 中使用 float ，否则很有可能这就是您想要的，因为它 a) 保持流动，b) 允许使用子元素 floats在不丢失流程的情况下，c) 实现您的理想定位，d) 保持父元素的继承(当它很重要时)。
另一种选择是更改 #header至 position:absolute .然而，这可能会改变一切交互的方式，除非您将所有父元素和兄弟元素更改为 position:absolute。 .此外，您可能无法访问祖先定义的宽度和高度，因为它们只有在同一流中时才会被继承。这对您来说是第二好的情况，因为您可以简单地添加规则 body * { position:absolute; }一切都将与你同在。然而，它忽略了真正教给您需要学习的关于定位的知识，而只会成为拐杖。
希望对您有所帮助， 模糊逻辑
关于html - CSS 定位边距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7838619/