Question

任何人都可以详细解释我在CSS中的相对和绝对。所有的描述告诉我绝对可以放在我想要的任何地方（这意味着我可以使用顶部，底部等）。我可以与亲戚一样实现同样的目标。我只是在W3schools中检查相对和绝对的一个小例子，其中相对占据了整条线但是绝对没有。我对此很困惑。

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

有人能用一个关于他们差异的完美例子来解释我吗？

Answer 1

我认为你可以从这个来源更好地理解Css定位

4种定位的快速摘要：

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

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

作为流的一部分（在页面流中）意味着元素将   将流量中的元素向下推进，然后再向下推   流中当前元素之前的元素。

相对CSS定位示例：
.fromorig {position: relative;
     top: 200px;}
已修复 - 从正常页面流中删除元素框，您可以设置精确的垂直和水平   元素相对于浏览器窗口的位置。另外，   固定元素的内容不会像普通HTML一样滚动   页面内容确实如此，它们将保持在当前位置   浏览器窗口。直到IE不支持固定定位   版本7。

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

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

见演示：

CSS Positioning With example

CSS中的相对vs绝对

1 个答案: