网站布局中Position属性四个值的区别和用法

position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

用Div+CSS进行网站布局时，做一些浮动层等特殊效果时要考虑到定位问题。这就要用到Position属性等。

---

【Static】
static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。

---

【Relative】
相对定位元素的定位是相对自己原本的正常位置。依据left，right，top，bottom等属性在正常文档流中偏移位置。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

1. 第三个

   发生了位置变化，分别向右向下移动了10px；

2. 其他的三个

   位置没有发生变化，这一点也很重要。
   因此，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。

Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。
left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。

---

【Absolute】
将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

从上面的结果中，我们能看出几点信息：
1. absolute元素脱离了文档结构。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
2. absolute元素具有“包裹性”。之前

的宽度是撑满整个屏幕的，而此时

的宽度刚好是内容的宽度。
3. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。
4. absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。

使用绝对定位的层前面的或者后面的层会认为这个层并不存在，也就是在z方向上，它是相对独立出来的，丝毫不影响到其它z方向的层。

Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

---

再提几个小知识点。
1. 设置absolute会使得inline元素被“块”化，这在上一节将display时已经说过；
2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多；
3. 上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”

---

【Fixed】

其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。
即使窗口是滚动的它也不会移动：

• Fixed定位使元素的位置与文档流无关，因此不占据空间。
• Fixed定位的元素和其他元素重叠。
• IE6不支持CSS中的position:fixed属性

---

【Z-index】

垂直定位：
Z轴方向上的层叠定位。

Z-index默认值都为0，
但默认情况下，后来者会覆盖前者，此时，如果需要改变层级关系，就要通过改变z-index值来实现。z-index越大优先级越高。

如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。
例如弹出层时用到最多。

在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。