CSS定位保证金问题
[英]CSS Positioning Margin Trouble
问题描述
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. 
我不确定如何使用css来放置元素，因为当我使用如下方法时，每当我调整浏览器的大小时，元素都位于同一位置，而不是我希望它们在调整大小的文档上的位置。 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;
}
Please, have a fiddle - http://jsfiddle.net/hHGRc/ 请摆弄小提琴-http: //jsfiddle.net/hHGRc/
4 个解决方案
解决方案1
13 已采纳 2011-10-20 16:46:27
Within the (X)HTML DOM, CSS recognizes four types of positioning. 在（X）HTML DOM中，CSS可以识别四种类型的定位。 By default, every element in HTML is positioned Statically. 默认情况下，HTML中的每个元素都是静态放置的。 This means that it is positioned according to the place that it appears in the normal flow. 这意味着将根据其在正常流中出现的位置进行定位。
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 ，这意味着它修改基于原点的位置，这是它会被定位在正常流动（静态）。 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. 但是，Relative还具有其他特殊功能，它告诉浏览器，无论使用相对还是绝对，其所有子项都将根据此元素定位。
Absolute Positioning When an object is positioned absolute , it is placed according to the position of its nearest non- static positioned ancestor. 绝对定位当对象被定位absolute ，则根据其最接近的非的位置放置static定位的祖先。 If there is not one, then it uses the <body> to determine its position. 如果没有，则使用<body>来确定其位置。 This has the potential to break document flow, if its siblings or ancestors are not positioned absolute . 如果其兄弟姐妹或祖先的位置不是absolute ，则有可能破坏文档流。 If all are positioned absolute from the outer most top node to current node, then it will maintain the flow. 如果所有位置都从最外面的最高节点到当前节点都是absolute的，则它将维持流量。
Fixed Positioning This takes the element out of the flow and positions the object according to the Window object. 固定定位这会将元素移出流程，并根据Window对象定位对象。 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). （这是获取与您一起滚动的对象的方式）。
Multiple solutions to your issue First, as described by others, you may add position:relative to the #header . 解决问题的多种方法首先，如其他人所述，您可以position:relative对于#header添加position:relative #header It will, like explained above, make your header the nearest non- static ancestor and will use it and the basis for determining position. 如上文所述，它将使您的标头成为最接近的非static祖先，并将使用它和确定位置的依据。 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很容易破坏足够的流量，您可能无法使用同级元素。
As an alternative, you may change the logo from position:absolute to position:relative . 或者，您可以将徽标从position:absolute更改为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中使用浮点数，否则很有可能是您想要的那种，因为它a）保持流动，b）允许使用子元素floats而不丢失流向，c）实现理想的定位，d）保留父元素的继承（重要时）。
Another choice is to change the #header to position:absolute . 另一个选择是将#header更改为position:absolute 。 This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute . 但是，这可能会改变一切交互的方式，除非您将所有父元素和同级元素都更改为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; } 这是对您最好的第二种情况，因为您可以简单地添加规则body * { position:absolute; } body * { position:absolute; } and all will remain in the flow with you. body * { position:absolute; } ，所有内容将与您同在。 However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch. 但是，它实际上并没有教给您有关定位所需的知识，而只是成为拐杖。
Hope this helps, FuzzicalLogic 希望对您有所帮助，FuzzicalLogic
解决方案2
0 2011-10-20 15:52:18
CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful. 要正确理解CSS定位可能有些棘手，但是一旦完成，您会发现它非常有用。
Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/ 试试这个： http : //www.barelyfitz.com/screencast/html-training/css/positioning/
Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. 基本上，要定位需要锁定到父级或容器元素的任何内容，父级或容器元素本身也需要定位（绝对或相对，无关紧要），这称为定位上下文。 If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context. 如果绝对定位的元素找不到自己定位的父对象或容器，则它将使用`body作为定位上下文。
So in your example, if i were to to guess without seeing your HTML and more of your CSS, 因此，在您的示例中，如果我猜不到看到您的HTML和更多CSS，
adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element. 然后， position:relative对于#header添加position:relative即可使.logo绝对将其自身定位在#header元素的左上方。
Also important to remember that absolute positioning takes the element out of the normal flow of the document. 同样重要的是要记住，绝对定位会使元素脱离文档的正常流程。
解决方案3
0 2011-10-20 15:52:31
Defining position: absolute in CSS takes the element in question out of the flow of the document. 定义位置：CSS中的absolute将有问题的元素从文档流中移出。
Think of this as layers: the bottom most layer is the document (though not always, depending on z-index!), and the top most layer is your element which you have defined as absolutely positioned. 将其视为层：最底层是文档（尽管并非总是如此，取决于z-index！），最顶层是您已定义为绝对定位的元素。
By setting position: absolute, you have told the browser that you will be responsible for positioning the element relative to the top left corner of the document (screen). 通过设置position：absolute，您已经告诉浏览器您将负责相对于文档（屏幕）的左上角定位元素。 Above, you have told the browser to position #logo 20px from the left and 20px from the top of the document. 在上方，您已经告诉浏览器将#logo定位在文档的左侧，距顶部20px。 When you resize your browser viewport, that element will remain in that position. 调整浏览器视口的大小时，该元素将保留在该位置。
I think what you want is to position your element within the document flow, without using absolute positioning. 我认为您想要的是在文档流中定位元素，而不使用绝对定位。 This can be achieved with a combination of floats, margins, and padding. 这可以通过浮动，边距和填充的组合来实现。
解决方案4
0 2011-10-20 15:57:50
I'm going with a wild guess and saying that your logo is inside the header division, but your header is positioned staticly. 我大胆猜测，说您的徽标位于标题区域内，但标题是静态放置的。 Therefore, your logo is not being positioned according to the header, but according to the document's window. 因此，您的徽标不是根据标题而是根据文档的窗口定位。 So it will be going to a position that is 20px right and 20px down from the top left corner of the document in all instances. 因此，在所有情况下，它都将位于文档右上角20px左下角20px的位置。
Try setting position: relative on your #header element. 尝试在#header元素上设置position: relative 。 This will keep the header in the same place as it would always appear, and the logo will use the header box to find it's left and top positions rather than the browser window. 这样可以将标题保留在始终显示的位置，徽标将使用标题框查找标题的左侧和顶部位置，而不是浏览器窗口。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.