谁能告诉我style = "position:absolute" 和style = "position:relative" 之间的区别以及如果我将其添加到div/span/input 元素中它们有何不同？
我现在正在使用absolute，但我也想探索relative。这将如何改变定位？
【问题讨论】：
标签： css css-position
绝对定位意味着元素完全脱离了页面布局的正常流程。就页面上的其余元素而言，绝对定位的元素根本不存在。然后在您使用left, right, top and bottom 属性指定的位置处单独绘制元素本身，类似于其他所有内容的“顶部”。
使用您通过这些属性指定的位置，然后将元素放置在其最后一个祖先元素中的该位置，该祖先元素的位置属性不是static（当没有指定位置属性时，页面元素默认为静态），如果不存在这样的祖先，则为文档正文（浏览器视口）。
例如，如果我有这个代码：
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
...<div> 将位于距浏览器视口顶部 20px 处，距浏览器视口左边缘 20px 处。
但是，如果我做了这样的事情：
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
...那么inner div 将位于距outer div 顶部20px 处，距其左边缘20px 处，因为outer div 未与position:static 定位，因为我们已明确将其设置为使用position:relative。
另一方面，相对定位就像声明根本没有定位一样，但是left, right, top and bottom 属性“推动”元素脱离其正常布局。页面上的其余元素仍然像元素在其正常位置一样布局。
例如，如果我有这个代码：
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
...那么所有三个<span> 元素将彼此相邻而不重叠。
如果我将第二个<span> 设置为使用相对定位，如下所示：
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>
...那么 Span2 将与 Span1 的右侧重叠 5px。 Span1 和 Span3 将位于与第一个示例完全相同的位置，在 Span2 的右侧和 Span3 的左侧之间留出 5px 的间隙。
希望能澄清一点。
【讨论】：
相对定位： 元素在偏离视口坐标轴的位置创建自己的坐标轴。它是文档流的一部分，但发生了变化。
绝对定位：元素在其父元素中搜索最近的可用坐标轴。然后通过指定与该坐标轴的偏移量来定位元素。它已从文档正常流程中删除。
【讨论】：
您一定会想查看“A List Apart”中的this positioning article。帮助揭开 CSS 定位的神秘面纱（在本文之前，这对我来说似乎很疯狂）。
【讨论】：
通过 CSS 定位，您可以将元素准确地放置在页面上您想要的位置。
当您要使用 CSS 定位时，您需要做的第一件事是使用 CSS 属性 position 告诉浏览器您要使用绝对定位还是相对定位。
两个职位都有不同的特点。在 CSS 中设置 Position 后，您就可以使用 top、right、bottom、left 属性了。
绝对位置
绝对位置元素相对于第一个元素定位 位置不是静态的父元素。
相对位置
相对定位的元素是相对于它的法线定位的 位置。
要相对定位元素，属性位置设置为相对。绝对定位和相对定位的区别在于位置的计算方式。
【讨论】：
好的，这里的答案很明显......基本上 relative 位置是相对于前一个元素或窗口，而 absolute 不关心其他元素，除非它是如果您使用顶部和左侧，则为父级...
查看我为您创建的示例以显示差异...
您还可以看到它的实际效果，使用我为您创建的 css，您可以看到绝对位置和相对位置的行为：
.parent {
display: inline-block;
width: 180px;
height: 160px;
border: 1px solid black;
}
.black {
position: relative;
width: 100px;
height: 30px;
margin: 5px;
border: 1px solid black;
}
.red {
width: 100px;
height: 30px;
margin: 5px;
top: 16px;
background: red;
border: 1px solid red;
}
.red-1 {
position: relative;
}
.red-2 {
position: absolute;
}<div class="parent">
<div class="black">
</div>
<div class="red red-1">
</div>
</div>
<div class="parent">
<div class="black">
</div>
<div class="red red-2">
</div>
</div>【讨论】：
绝对定位基于显示器的坐标：
position:absolute;
top:0px;
left:0px;
^ 将元素放在窗口的左上角。
相对位置是相对于放置元素的位置：
position:relative;
top:1px;
left:1px;
^ 将元素向下放置 1px，距其最初所在位置的左侧 1px :)
【讨论】：
亲戚：
带有position: relative; 的元素相对于其正常位置进行定位。
如果您没有在相对元素上添加定位属性（上、左、下或右），则根本不会影响其定位。它的行为与position: static 元素完全相同。
具有这种定位的元素会受到其他元素的影响，它本身也会影响其他元素。
绝对：
带有position: absolute; 的元素允许您将任何元素准确地放置在您想要的位置。您使用定位属性top、left、bottom。和设置位置的权利。
相对于最近的非静态祖先放置。如果没有这样的容器，则相对于页面本身放置。
它会从页面上的正常元素流中删除。
具有这种定位的元素不受其他元素的影响，也不会影响其他元素的流动。
请参阅这个不言自明的示例以获得更好的清晰度。 https://codepen.io/nyctophiliac/pen/BJMqjX
【讨论】：
Absolute 将对象（div、span 等）放置在一个绝对强制位置（通常以像素为单位确定），relative 会将其放置在距其通常位置一定距离的位置。例如：
位置：相对；左：-20px;
如果文本左侧距离屏幕左边缘 20 像素以内，可能会使文本左侧消失。
【讨论】：
position: absolute 可以放置在任何位置并保持在那里，例如 0,0。
position: relative 的位置与它最初在浏览器中的位置有偏移。
【讨论】：
position: relative 充当父元素 position: absolute 充当相对位置的子级。 你可以看到下面的例子
.postion-element{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.absolute-element{
position:absolute;
top:10px;
left:10px;
background-color:blue;
}
【讨论】：