绝对定位意味着元素完全脱离页面布局的正常流程。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在其他所有内容的“顶部”，在您使用left, right, top and bottom属性指定的位置。使用您使用这些属性指定的位置，然后将元素放置在其最后一个祖先元素中的位置，该元素具有除static（指定未指定位置属性时默认为静态的页面元素）或文档正文（浏览器）之外的任何位置属性viewport）如果没有这样的祖先存在。例如，如果我有这个代码：<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>...然后innerdiv将位于div顶部20px，距离outerdiv的左边缘20px，因为outerdiv没有定位，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的间隙。希望能澄清一点事情。