style =“position：absolute”和style =“position：relative”之间的区别
任何一个可以告诉我style = "position:absolute"和style = "position:relative"区别，以及如果我将它添加到div / span / input元素，它们有何不同？
我现在正在使用absolute ，但我也想探索relative 。 这将如何改变定位？
绝对定位意味着元素完全脱离了页面布局的正常stream程。 就页面上的其他元素而言，绝对定位的元素根本就不存在。 然后，元素本身被分开绘制，在您指定的位置使用left, right, top and bottom属性的位置sorting。
使用这些属性指定的位置，然后将元素放置在其最后一个祖先元素中的位置，该元素的位置属性不是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>Span1</span> <span style="position: relative; left: -5px;">Span2</span> <span>Span3</span>
… Span2将重叠Span1的右侧5px。 Span1和Span3与第一个示例的坐标完全相同，在Span2的右侧和Span3的左侧之间留有5px的间隔。
希望澄清一些事情。
你一定要看看A List Apart的定位文章 。 帮助神秘CSS定位（这在本文之前似乎是疯了）。
相对定位：元素在与视口坐标轴偏移的位置创build自己的坐标轴。 它是文档stream程的一部分，但转移。
绝对定位：元素search其父元素中最接近的可用坐标轴。 然后通过指定来自该坐标轴的偏移来定位该元素。 它从文档正常stream程中删除。
资源
使用CSS定位，您可以将元素精确放置在页面上的所需位置。
当你要使用CSS定位的时候，你需要做的第一件事就是使用CSS属性位置来告诉浏览器你将使用绝对定位还是相对定位。
两个位置都有不同的function。在Css一旦你设置位置，那么你可以使用顶部，右侧，底部，左侧的属性。
绝对位置
绝对位置元素相对于具有非静态位置的第一个父元素进行定位。
相对位置
相对定位元件相对于其正常位置定位。
为了相对定位元素，属性位置被设置为相对的。 绝对定位和相对定位之间的区别在于如何计算位置。
更多： 位置相对与绝对
绝对定位是基于显示器的协调员：
position:absolute; top:0px; left:0px;
^放置窗口左上angular的元素。
相对位置相对于元素的放置位置：
position:relative; top:1px; left:1px;
^从最初坐的地方左边放置元素1px向下和1px 🙂
当你要使用CSS定位的时候，你需要做的第一件事就是使用CSS属性位置来告诉浏览器你将使用绝对定位还是相对定位。
两个位置都有不同的function。在Css一旦你设置位置，那么你可以使用顶部，右侧，底部，左侧的属性。
绝对位置
绝对位置元素相对于具有非静态位置的第一个父元素进行定位。
相对位置
相对定位元件相对于其正常位置定位。
为了相对定位元素，属性位置被设置为相对的。 绝对定位和相对定位之间的区别在于如何计算位置。
绝对将对象（div，span等）放置在绝对强制位置（通常以像素为单位），相对位置会将其放置在距离位置通常位置一定的位置。 例如：
位置：相对; 左：-20px;
如果文本的左侧距离屏幕左边缘20像素内，可能会使文本的左侧消失。
好的，这里非常明显的答案…基本上相对位置是相对于以前的元素或窗口，而绝对不关心其他元素，除非它是一个父母，如果您使用顶部和左…
看看我为你创造的例子，以显示差异…
你也可以在行动中看到它，使用我为你创build的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>
