position: relative 和 position: absolute 在 CSS 中的区别是什么？什么时候应该使用它们？
【问题讨论】：
标签： css
绝对 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 段。
第 3 段。 在上面的示例中，第三段将位于容器元素左侧的3em，但仍位于前两段下方。它将保留在文档的正常流程中，只是略微偏移。如果您将其更改为position: absolute;，它后面的任何内容都会显示在它上面，因为它不再处于文档的正常流程中。
注意事项：
绝对定位的元素的默认width是其中内容的宽度，这与相对定位的元素不同，默认width是它可以填充的空间的100% .
你可以让元素与绝对定位的元素重叠，而你不能用相对定位的元素来做到这一点（原生即不使用负边距/定位）
大量来自：this resource
【讨论】：
“相对”和“绝对”定位都是相对的，只是框架不同。 “绝对”定位是相对于另一个封闭元素的位置。 “相对”定位是相对于元素本身没有定位的位置。
这取决于您使用哪一个的需求和目标。 “相对”位置适用于当您希望将元素从其在元素流中原本应该具有的位置（例如使某些字符出现在上标位置。 “绝对”定位适用于将元素放置在由另一个元素设置的某个坐标系中，例如用一些文字“叠印”图像。
作为一个特殊的，使用没有位移的“相对”定位（只是设置position: relative）使元素成为参考框架，这样您就可以对其中的元素使用“绝对”定位（在标记中） .
【讨论】：
Relative positioning is relative to the position that the element itself would have without positioning ??没有定位的元素默认是“静态的”，但不是相对的
另外需要注意的是，如果您希望将绝对元素限制在父元素中，则需要将父元素的位置设置为相对。这将使子元素包含在父元素中，并且不会与整个窗口“相对”。
我写了一个blog post，给出了一个简单的例子，它产生了以下影响：
它有一个绝对位于父黄色 div 底部的绿色 div。
1http://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 : 相对于当前位置，但可以移动。或者一个 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 的位置。 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;
}
我看到你的问题得到了很好的回答，但是经过很多麻烦后，我发现这是一个非常好的解决方案，并且是一种更好地理解定位如何工作的方法.. 当我将文本内容放在下拉菜单下方时，它不会将我的文本推到一边。 如果我将文本更改为绝对位置，则页脚不会留在原位。 因为我相信这对比我更多的人来说是一个问题，所以我在这里添加了这个。 实际上发生的事情是，我将文本 35ems 放在下拉列表下方。
然后，我在视觉上把它放在彼此旁边，相对位置，顶部：-35em;，然后将下面的巨大空间拉平，边距：-35em;
当人们更好地理解这些位置时，有时会低估负值，非常好的功能！
当然，固定位置，对于我的页脚来说似乎也是合理的，但如果文本或内容比视口长，我确实希望页脚低于视口。 如果页面内容很少，则留在底部。
这个 setupp 很好地解决了这个问题，记住使用 'em' 而不是 'px' 以获得更流畅/动态的页面布局！ :)
（可能有更好的解决方案，但这适用于跨平台和设备）。
【讨论】：
相对与绝对：
【讨论】：
让我们讨论一个场景来解释绝对与相对之间的区别。
在 body 元素内部，假设您有一个 header 元素，其高度是 viewheight 的 95%，即 95vh。在这个容器中，您放置了一个图像并将其不透明度降低到 0.5。现在您想在左上角附近放置一个徽标图像。我希望你理解这个场景。因此，您将在标题部分有一个较轻的图像，并在其顶部的指定位置有一个徽标。
但在开始之前，我已经像这样将边距和填充设置为 0
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
这确保没有默认边距和填充应用于元素。
因此您可以通过两种方式实现您的要求。
第一道
你用css写
.logo{
float:left;
margin-top:40px;
margin-left:40px;
}
但是我的朋友，这是一个糟糕的设计，因为在不需要时给它一些边距来放置一个你不必要地占用大量空间的图像。您所需要的只是将图像放置到该位置。你通过用边距来缓冲它来管理它。边距占据了空间并将其内容推得更深，给人的印象是它恰好位于您想要的位置。希望您通过像这样解决问题来理解这个问题。您占用的空间超出了仅在所需位置放置图像所需的空间。
现在让我们尝试不同的方法。
第二种方式
你像这样将头类的位置属性设置为相对
.header{
position: relative;
}
然后您将以下属性添加到徽标类
.logo{
position:absolute;
top:40px;
left:40px
}
你去。您将图像放置在完全相同的位置。第一种方法和第二种方法之间的肉眼定位不会有任何明显差异。但是如果你检查 image element ，你会发现它并没有占用任何额外的空间。它占据的面积与它自己的宽度和高度完全相同。
那么这怎么可能呢？我对图像徽标类说，由于您是该类的子类，因此您将被放置在 relative 标题类中，并且我特别提到它的位置为 relative。这样它的任何孩子都将相对于它的左上角放置。并且您的位置需要固定在此父元素内。所以你得到了绝对的。而且你需要从顶部和左侧移动一点到我希望你成为的位置。因此，您将获得以 40px 作为值的 top 和 left 属性。这样，您将仅相对于您的父母被放置。因此，如果明天我将您的父级向上或向下移动或只是在任何地方，您将始终位于父标题左上角的顶部和左侧 40 像素。因此，无论您父母的职位将来是否固定（因为它不像您那样绝对），您的职位在您的父母内部都是固定的。
因此，分别对父级和子级使用相对和绝对。其次，当您只想将子元素放置在其父元素内的某个位置时，请使用它。不要使用边缘等填充物强行推动它。给父相对值和要移动的子绝对值。为子类指定 top、left bottom 或 right 属性以将其放置在父类中您想要的任何位置。
谢谢。
【讨论】：
Absolute 将使您的元素脱离流布局，并将其定位到最近的相对父级（默认情况下，所有父级都是静态的）。这就是您大多数时候同时使用绝对和相对的方式。
您也可以单独使用 relative，但这种情况非常罕见。
我制作了一个视频来解释这一点。
【讨论】：