style = "position:absolute"和style = "position:relative"之间的区别，以及它们在将其添加到div/span/input元素时有何不同？absolute，但我也想尝试一下relative。这会如何改变定位？绝对定位意味着元素完全脱离了页面布局的正常流程。就其余页面元素而言，绝对定位的元素根本不存在。元素本身被独立绘制，有点像“置于”其他所有内容之上，在您使用left、right、top和bottom属性指定的位置上。
使用这些属性所指定的位置，元素将放置在其最后一个祖先元素中，该祖先元素具有任何不是static的position属性（当未指定位置属性时，页面元素默认为静态），如果不存在此类祖先，则放置在文档主体（浏览器视口）中。
例如，如果我有以下代码：
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
...<div> 元素将在浏览器视口顶部和左侧各偏移20像素。
然而，如果我像这样做：
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
如果我们设置了 position:relative，那么内部的 div 将会距离外层的 div 顶部和左侧分别为 20 像素。因为我们已经明确地将其设置为使用 position:relative，所以外层的 div 不是使用 position:static 定位。
而相对定位则就像没有设置定位一样，不过 left、right、top 和 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向右侧重叠5像素。Span1和Span3的位置与第一个示例完全相同，使得Span2的右侧与Span3的左侧之间留下了5像素的间隙。
希望这能够更加清晰地说明问题。
相对定位：元素创建自己的坐标轴，偏移于视口坐标轴之外的位置。它是文档流中的一部分，但位置发生了偏移。
绝对定位：元素在其父元素中搜索可用的最近坐标轴，然后通过指定相对该坐标轴的偏移量来定位。它被从文档正常流中删除。
好的，很明显的答案...基本上，相对定位是相对于前一个元素或窗口，而绝对定位不关心其他元素，除非它是父元素（如果您使用top和left）...
看看我为您创建的示例，以展示它们之间的区别...
此外，您可以查看其实际效果，使用我为您创建的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;
^ 将元素向下移动1像素，并使其距离原来的位置左侧1像素 :)
相对定位：
具有position: relative;属性的元素相对于其正常位置定位。
如果在相对定位的元素上没有添加定位属性（top、left、bottom或right），它将不会对其位置产生任何影响。它的行为与position: static元素完全相同。
但是，如果您添加其他定位属性，例如top: 10px;，它将从通常的位置向下移动10像素。
这种类型的定位元素受其他元素的影响，同时也会影响其他元素。
绝对定位：
具有position: absolute;属性的元素允许您将任何元素放置在您想要的位置。使用定位属性top、left、bottom和right设置位置。
它相对于最近的非静态祖先元素定位。如果没有这样的容器，则相对于页面本身进行定位。
它被从页面中的正常元素流中移除。
这种类型的定位元素不受其他元素的影响，也不会影响其他元素的流程。
请看这个自我说明的例子以获得更好的清晰度。 https://codepen.io/nyctophiliac/pen/BJMqjX
绝对定位会将对象（div、span等）放置在绝对强制位置（通常以像素为单位确定），而相对定位会将其放置在离其正常位置一定距离的地方。例如：
position:relative; left:-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;
}