CSS中的position: relative和position: absolute有什么区别？什么时候应该使用哪个？
绝对CSS定位
position: absolute;
绝对定位是最容易理解的。你从CSS position属性开始：
position: absolute;
这告诉浏览器应该从文档的正常流程中删除要定位的内容，并将其放置在页面上的确切位置。它不会影响HTML之前或之后的元素如何定位在网页上，但除非您覆盖它，否则它将受父母的定位影响。
如果你想将一个元素从文档窗口的顶部放置10个像素，你可以使用top偏移到position它与absolute定位：
position: absolute;
top: 10px;
然后，该元素将始终从页面顶部显示10px，无论内容在元素下方或上方（视觉上）通过什么内容。
四个定位属性是：
toprightbottomleft要使用它们，您需要将它们视为偏移属性。换句话说，位于right: 2px的元素没有向右移动2px。它的右侧是由2px偏离窗口的右侧（或其位置覆盖父级）。其他三个也是如此。
相对定位
position: relative;
相对定位使用与absolute定位相同的四个定位属性。但是，不是将元素的位置基于浏览器视图端口，而是在元素仍处于正常流程中时从元素的位置开始。
例如，如果您的网页上有三个段落，而第三个段落上放置了position: relative样式，则其位置将根据其当前位置而不是视图端口的原始边缘进行偏移。
第1段。
第2段。
Paragraph 3. In the above example, the third paragraph will be positioned3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute;, anything following it would display on top of it, because it would no longer be in the normal flow of the document.
笔记：
width是其中内容的宽度，不像相对定位的元素，它的默认值width是它可以填充的空间的100%。很多人从：this resource
“相对”和“绝对”定位都是相对的，只是具有不同的框架。 “绝对”定位是相对于另一个封闭元素的位置。 “相对”定位是相对于元素本身没有定位的位置。
这取决于您使用的需求和目标。当您希望将元素从元素流中所具有的位置移位时，“相对”位置是合适的，例如，使某些字符出现在上标位置。 “绝对”定位适合于将元素放置在由另一个元素设置的某个坐标系中，例如，使用一些文本“叠印”图像。
作为一个特殊的，使用没有位移的“相对”定位（只需设置position: relative）使元素成为引用框架，这样就可以对其中的元素（标记）使用“绝对”定位。
另外需要注意的是，如果您希望将绝对元素限制为父元素，则需要将父元素的位置设置为relative。这将使子元素保持在父元素中，并且它不会与整个窗口“相对”。
我写了一个blog post，给出了一个创建以下影响的简单示例：
它有一个绿色div，绝对位于父黄色div的底部。
1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/
相对位置：
如果指定position：relative，则可以使用top或bottom，left或right来相对于文档中通常出现的位置移动元素。
位置绝对：
当您指定position：absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置。
这是一个很好的教程http://www.barelyfitz.com/screencast/html-training/css/positioning/与两个位置的样本使用相对于绝对和相对定位。
相对：相对于它的当前位置，但可以移动。或者RELATIVE定位元素相对于ITSELF定位。
绝对：ABSOLUTE定位元素相对于ITS CLOSEST POSITIONED PARENT定位。如果有一个，那么它就像固定的.....相对于窗口。
<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的位置。 Details
给出答案，因为我的声誉不足以评论。但是不要把这看作是一个答案，只是一个额外的信息，就像我自己一样，在页脚和定位方面都存在一些问题。
设置页面时，我的页脚始终保持在底部，位置绝对，主容器/包装器具有相对位置。
然后我发现了我的文本内容的一些问题，以及相同内容中的菜单（页眉和页脚之间的页面的白色部分），当将这些设置为绝对时，页脚不再保持不变。
正如你所说的那样，定位是一个复杂的主题。
我的解决方案，在我的网页中以“绝对”位置想要的内容，而不是被推到一边，在打开下拉菜单的示例中，实际上是给它相关的邮件，并将它放在我的下拉列表下方35em菜单。 （完全扩展时，35em是我的下拉菜单的高度）
然后，Top：-35em，用于将之前的内容推到一边。然后添加margin-bottom：-35em。这样，内容在我的下拉菜单“下方”，但在视觉上它与我的下拉菜单并排！下面到页脚的白色空间只有10em边距，因为它是在开始玩这个之前。所以我对此的解决方案是这样的：
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;
}
我看到你的问题得到了很好的回答，但是经过很多麻烦我发现这是一个非常好的解决方案，并且更好地了解定位的工作方式。当我放置文本内容时，在我的下拉菜单下面，它没有把我的文字推到一边。如果我将文本更改为绝对位置，则页脚不会保留在原位。我可以相信这对我来说是一个更多人的问题，我在这里补充一下。实际上发生了什么，我把文字，35 ems，放在我的下拉之下。
然后，我在视觉上把它放在彼此旁边，相对位置，顶部：-35em;，然后在下面的巨大空间中傍晚，边缘：-35em;
当人们更好地理解这些位置时，有时会低估负值，非常好的功能！
从本质上讲，固定位置对于我的页脚来说似乎也是逻辑，但如果文本或内容比视口长，我确实希望页脚位于视口下方。如果页面上的内容很少，请保持在最底层。
这个setupp很好地修复了，并且记得使用'em'，而不是'px'来获得更流畅/动态的页面布局！ :)
（可能有更好的解决方案，但这适用于跨平台以及设备）。
让我们讨论一个解释绝对与相对之间差异的场景。
在body元素内部说你有一个标题元素，其高度是viewheight的95％，即95vh。在这个容器中你放置了一个图像并将其不透明度降低到0.5。现在你想在左上角附近放置一个徽标图像。我希望你理解这个场景。因此，您将在标题部分中获得较浅的图像，并在指定位置的顶部显示徽标。
但在开始之前，我已将margin和padding设置为0
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
这确保没有默认边距和填充应用于元素。
所以你可以通过两种方式达到你的要求。
第一道路
.logo{
float:left;
margin-top:40px;
margin-left:40px;
}但是我的朋友这是一个糟糕的设计，因为在不需要的时候给你一些不必要地消耗这么多空间的图像。您只需将图像放置到该位置即可。你通过利用边缘缓冲它来管理它。边际占据了空间并将其内容推得更深，给人的印象是它准确定位在您想要的位置。希望你能像这样解决这个问题。您需要更多空间，只需将图像放在所需位置即可。
现在让我们尝试一种不同的方法。
第二种方式
.header{
position: relative;
}.logo{
position:absolute;
top:40px;
left:40px
}你去吧您将图像放在完全相同的位置。在第一种方法和第二种方法之间，肉眼的定位不会有任何明显的差异。但是如果你检查图像元素，你会发现它没有占用任何额外的空间。它占据的面积与自己的宽度和高度完全相同。
那怎么可能呢？我对图像徽标类说，你将相对于头类放置，因为你是这个类的孩子，我特别提到它的位置是相对的。这样它的任何一个孩子都会相对于它的左上角放置。并且您的位置需要在此父元素中修复。所以你给了绝对的。而且你需要从上到下移动一点我想要你的位置。因此，您将获得顶部和左侧属性，其值为40px。通过这种方式，您将仅相对于您的父母。因此，如果明天我将您的父母上下移动或移动到任何地方，您的父母标题左上角的顶部和左侧将始终为40px。所以，无论你父母的位置是否固定，你的位置都固定在你父母的位置（因为它不像你一样绝对）。
因此，分别对父母和孩子使用亲属和绝对。其次，当您只想将子元素放在其父元素内的某个位置时，请使用它。不要使用像边距这样的填充物强行推动它。给出要移动的父亲相对值和子项，绝对值。为子类指定top，left bottom或right属性，以将其放在父级所需的任何位置。
谢谢。
相对vs绝对：
Marco Pellicciotta：元素在另一个元素中的位置可以是相对的或绝对的，关于它内部的元素。
如果您需要在浏览器窗口的角度定位元素，最好使用position：fixed