绝对定位是指元素完全从页面布局的正常流程中移出。就页面上的其余元素而言，绝对定位的元素根本不存在。然后，在您使用
left, right, top andbottom属性指定的位置，元素本身被单独绘制，在所有其他内容的“顶部” 。
使用您使用这些属性指定的位置，该元素将被放置在其最后一个祖先元素中的那个位置，该元素的位置属性不是
static（（未指定位置属性时的页面元素默认为静态））或文档正文（浏览器）视口）（如果不存在这样的祖先）。
例如，如果我有以下代码：
<body> <div ></div></body>
…
<div>应位于距浏览器视口顶部20px处，距浏览器左边缘20px处。
但是，如果我做了这样的事情：
<div id="outer" > <div id="inner" ></div> </div>
…然后将
innerdiv从
outerdiv 的顶部定位20px，从其顶部向左定位20px
，因为
outerdiv的定位位置不是
position:static因为我们已将其明确设置为use
position:relative。
另一方面，相对定位就像根本不声明任何定位一样，但是
left, right, top andbottom属性将元素“推”出了其正常布局。页面上的其余元素仍然会布局，就像该元素位于其正常位置一样。
例如，如果我有以下代码：
<span>Span1</span><span>Span2</span><span>Span3</span>
…然后这三个
<span>元素将彼此相邻而不会重叠。
如果我将第二个设置
<span>为使用相对定位，如下所示：
<span>Span1</span><span >Span2</span><span>Span3</span>
…那么Span2将与Span1的右侧重叠5像素。Span1和Span3与第一个示例位于完全相同的位置，在Span2的右侧和Span3的左侧之间留有5px的间隙。
希望这能使事情澄清一点。
