css position 属性 定位学习

以下是基于W3cschool的内容（http://www.w3school.com.cn/），部分转自网络。
可能有点乱。

CSS position 属性

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

有四种属性：static、relative、absolute、fixed。

1.relative   元素框偏移某个距离。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

案例：定位：相对定位

2.absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

案例：定位：绝对定位

效果显示：

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

3.fixed:元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身(不是很懂啊)。

先看个例子吧：

案例：定位：固定定位

本例演示如何相对于浏览器窗口来对元素进行定位。

为了让效果更明显，我将 style 代码做了调整如下：

结果如下图：

那么absolute和fixed有什么区别呢？

同样都是固定位置，但是absolute是与页面相对固定，而fixed是与浏览器窗口相对固定。

如下代码可以拿去测试一下，（可直接放在w3school的案例里面测试）：

 

  
我在屏幕的位置不会改变
  
我会随屏幕滚动
 

4.至于最后一个，static，它是posotion的默认参数，无特殊定位，对象遵循html定位规则