位置相对与位置绝对？
位置相对位置和绝对位置有什么区别，什么时候使用哪一个在CSS中？
绝对的CSS定位
position: absolute;
绝对定位是最容易理解的。 您从CSS position属性开始：
position: absolute;
这告诉浏览器，无论将要放置什么，都应该从文档的正常stream程中移除，并将放置在页面上的确切位置。 它不会影响HTML之前或之后的元素如何定位在网页上，但除非您重写，否则将受到父母的定位。
如果要从文档窗口的top放置一个10像素的元素，则可以使用top偏移量将其放置在absolute位置：
position: absolute; top: 10px;
这个元素将总是显示从页面顶部的10px ，而不pipe内容是通过什么内容，在元素之下或之上（直观地）。
四个定位属性是：
-
top -
right -
bottom -
left
要使用它们，您需要将它们视为偏移属性。 换句话说，位于right: 2px的元素right: 2px不会右移2px 。 它的右侧从窗口的右侧（或其位置覆盖父）偏移2px 。 其他三个也是如此。
相对定位
position: relative;
相对定位使用与absolute定位相同的四个定位属性。 但是，不是将元素的位置放在浏览器视图端口上，而是从元素的位置开始，如果它仍处于正常stream程中 。
例如，如果您的网页上有三个段落，而第三个段落的position: relative样式，则其位置将根据其当前位置偏移 – 而不是从视图端口的原始侧面偏移。
第1款
第2段
第3段。
在上面的例子中，第三段将位于容器元素左侧3em处，但仍然在前两段之下。 这将保持在文件的正常stream程中，只是稍微抵消。 如果您将其更改为position: absolute; 之后的任何内容都将显示在其之上，因为它不再处于文档的正常stream程中。
笔记：
-
绝对定位的元素的默认
width是其内容的宽度，不同于相对定位的元素，其默认width是其可以填充的空间的100%。 -
你可以有与绝对定位的元素重叠的元素，而你不能用相对定位的元素（本地，即不使用负边距/定位）
从这个资源拉来的地段
“相对”和“绝对”定位是相对的，只是框架不同而已。 “绝对”定位是相对于另一个封闭元素的位置。 “相对”定位是相对于元件本身没有定位的位置。
这取决于你使用哪一个你的需求和目标。 “相对”的位置是适合的，当你想从元素的stream动，否则会有位置的元素位移一个元素，例如，使一些字符出现在上标的位置。 “绝对”定位适合于将元素放置在由另一元素设置的某个坐标系统中，例如用一些文本“叠印”图像。
作为一个特殊的，使用“相对”的定位，没有位移（只是设置position: relative ），使一个元素的参考框架，以便您可以使用“绝对”定位的内部元素（在标记）。
位置相对：
如果指定position：relative，则可以使用顶部或底部，左侧或右侧将元素相对于文档中正常出现的位置移动。
绝对位置：
当您指定position：absolute时，该元素将从文档中移除，并放置在您要求的位置。
这里是一个很好的教程http://www.barelyfitz.com/screencast/html-training/css/positioning/与两个位置与绝对和相对定位的示例用法。;
另外要注意的是，如果你想要一个绝对的元素被限制在一个父元素，那么你需要将父元素的位置设置为相对。 这将保持包含在父元素中的子元素，并且不会与整个窗口“相对”。
我写了一个博客文章 ，给出了一个简单的例子，创造了以下影响：
这有一个绿色的div，绝对位于父黄色div的底部。
1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/
相对：相对于当前位置，但可以移动。 或者一个RELATIVE定位元素相对于ITSELF定位。
绝对：绝对定位的元素相对于其最接近的父母定位。 如果有人在场，那么就像固定相对于窗户一样。
<div style="position:relative"> <!--2nd parent div--> <div> <!--1st parent div--> <div style="position:absolute;left:10px;....."> <!--Middle div--> Md. Arif </div> </div> </div>
在这里，第二个父div位置是相对的，所以中间div将相对于第二个父div改变它的位置。 如果第一个父div位置相对，那么中间div将改变它的位置相对于第一个父div 。 细节
回答一下，因为我的名声还不够评论。 但是不要把这看作是一个答案，只是一个额外的信息，因为我自己，在页脚和定位方面都有一些问题。
在设置页面时，我的页脚总是停留在底部，绝对位置，主容器/包装具有相对位置。
然后，我发现我的文本内容的一些问题，并在相同的内容（页眉和页脚之间的页面的白色部分）菜单，当设置为绝对，页脚不再停留下来。
正如你所说，分期是一个复杂的主题。
我的解决scheme，我的网页上的“绝对”位置所需的内容，而不是被推到一边，例如打开一个下拉菜单，实际上是给它相对的邮政，并把它放在我的下拉下35em菜单。 （35em是我的下拉菜单的高度，当完全扩展时）
然后，顶部：-35em，以前被推到一边的内容。 然后添加margin-bottom：-35em。 这样，内容在我的下拉菜单“下方”，但在视觉上与我的下拉菜单是并排的！ 而下面的白色空间到页脚，只有10em的边缘，因为它之前开始玩这个。 所以我的解决scheme是这样的：
html, body { margin:0; padding:0; height:100%; } h1 { margin:0; } #webpage { position:relative; min-height:100%; margin:0; overflow:auto; } #header { height:5em; width:100%; padding:0; margin:0; } #text { position:relative; margin-bottom:-32em; padding-top:2em; padding-right:2em; padding-bottom:10em; background-repeat:no-repeat; width:70%; padding-left:auto; margin-left:auto; margin-right:auto; right:10em; float:right; top:-32em; } #dropdown { position:absolute; left:0; width:20%; clear:both; display:block; position:relative; top:1em; height:35em; } #footer { position:absolute; width:100%; right:0; bottom:0; height:5em; margin:0; margin-top:5em; }
我发现你的问题已经被很好的回答了，但是在经过了很多的麻烦之后，我发现这是一个非常好的解决scheme，并且更好地理解了定位是如何工作的。当我把我的文本内容放在我的下拉菜单下时，把我的文字推到一边。 如果我将文字改为绝对位置，页脚就不会保留。 我可以相信这是一个问题，更多的人，然后我在这里补充一点。 实际上发生的是，我把文本，35ems，放在我的下面。
然后我直观地把它放在旁边，相对的位置上面，顶部：-35，然后在下面的巨大的空间外面，边缘：-35em;
负面的价值有时被低估，function非常好，当你更好地理解这些立场的时候！
自然，固定的位置，对我的页脚来说似乎也是逻辑的，但是如果文本或内容长于视口，我确实希望页脚在视口之下。 如果网页上的内容很less，就留在底部。
这setupp固定很好，记得使用'em'，而不是'px'更stream畅/dynamic的页面布局！ 🙂
（可能有更好的解决scheme，但是这对我来说是跨越平台，以及设备）。
Marco Pellicciotta：元素在另一个元素中的位置可以是相对的，也可以是绝对的，关于元素的内部。
如果您需要在浏览器窗口的angular度来定位元素，最好使用position：fixed
