CSS定位余量故障 [英] CSS Positioning Margin Trouble
问题描述
我不确定如何使用css定位元素，当我使用像下面这样的方法，每当我调整浏览器的大小，元素保持在同一个地方，而不是我想他们在调整大小的文档。请你能告诉我我做错了什么？
I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where I would like them to be on the resized document. Please can you tell me what I am doing wrong?!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
请小费 - http://jsfiddle.net/hHGRc/
推荐答案
在（X）HTML DOM中，CSS识别四种类型的定位。默认情况下，HTML中的每个元素都静态定位。
Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.
相对定位
当对象是一个对象时，定位 relative ，它意味着它根据原点修改位置，这是它将位于正常流（静态）中的位置。相对也做了别的事情，但是，它告诉浏览器，其所有的孩子将根据这个元素，无论使用相对还是绝对定位。
Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.
绝对定位
当对象位于 absolute 根据其最近的非 - 静态定位的祖先的位置放置。如果没有一个，那么它使用< body> 来确定它的位置。如果它的兄弟或祖先没有位于 absolute ，那么这有可能破坏文档流。如果所有都位于 absolute 从最外层顶层节点到当前节点，那么它将保持流。
Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.
固定位置
这会将元素从流中移出，并根据Window对象定位对象。这意味着，无论文档的滚动状态，其大小或任何其他属性，它将始终出现在该位置。
Fixed Positioning This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).
您的问题的多种解决方案
首先，如其他人所述，您可以将 position：relative 添加到 #header 。它将像上面解释的那样，使你的标题是最接近的非< - code> static 祖先，并将使用它和确定位置的基础。这可能不适合你，因为你是一个承认的新手，这个绝对可以轻松地打破足够的流量，你可能会与同胞元素斗争。
Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.
或者，您可以将标志从位置：absolute 更改为 position：relative 。这将使您的徽标保持流动，但根据文档流中自然出现的位置移动徽标。有可能是，除非你在你的#header中使用浮动，这可能是你想要的，因为它a）保持流，b）允许使用子元素 float 没有流失，c）实现你的理想定位，d）保持从父元素继承（当重要时）。
As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).
另一个选择是改变 #header 到 position：absolute 。这可能会改变一切交互的方式，除非你将所有的父和兄弟元素更改为 position：absolute 。此外，您可能无法访问祖先定义的宽度和高度，因为它们只在同一个流中时才继承。这是你的第二好的情况，你可以简单地添加规则 body * {position：absolute; } ，所有将与您保持在流中。
Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.
希望这有帮助，
FuzzicalLogic
Hope this helps, FuzzicalLogic
这篇关于CSS定位余量故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
