CSS中的相对与绝对[重复]答案

【问题标题】：Relative vs Absolute in CSS [duplicate]CSS中的相对与绝对[重复]
【发布时间】：2015-11-23 18:09:00
【问题描述】：

谁能详细解释一下CSS中的相对和绝对。所有的描述都告诉我 absolute 可以放在我想要的任何地方（这意味着我可以使用顶部、底部等）。我也可以用亲戚来达到同样的效果。我只是在 W3schools 中检查了一个相对和绝对的小例子，其中相对占据了整行，但绝对没有。我对此感到困惑。

http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative

谁能用一个完美的例子来解释我的区别？

【问题讨论】：

骗子中接受的答案在绝对定位解释中是错误的。看看评论有 72 个赞。

标签： html css

【解决方案1】：

我认为您可以从此来源更好地理解 Css 定位

四种定位方式的快速总结：

Static - 静态定位是默认设置，它是什么时候发生的你设置没有定位。元素（标签及其内容）留在正常的页面流。

相对 - 元素的框仍然是页面流的一部分，但它的位置相对于它的垂直和/或水平变化在页面流中自己的正常位置。

成为流程的一部分（在页面流程中）意味着一个元素将将流中后面的元素进一步向下推，并被进一步向下推按流中当前元素之前的元素。

相对 CSS 定位示例：
.fromorig {position: relative;
     top: 200px;}
固定 - 元素的盒子从正常的页面流中移除，您可以设置精确的垂直和水平元素相对于浏览器窗口的位置。此外，固定元素的内容不会像普通 HTML 那样滚动页面内容做，他们会停留在他们当前的位置浏览器窗口。 IE 不支持固定定位，直到第 7 版。

固定 CSS 定位示例：
.nevermove {position: fixed;
      top: 200px;
      left: 200px;} 
Absolute - 元素的盒子从正常的页面流中移除，你可以设置精确的垂直和水平绝对元素相对于它所在元素的位置。此外，绝对元素的内容将垂直滚动（和/或水平）像普通的 HTML 页面内容一样。

绝对 CSS 定位示例：
 .moveit {position: absolute;
   top: 200px;
   left: 200px;}

查看演示：

CSS Positioning With example

【讨论】：