position的static、relative、absolute、fixed、inherit

网上有很多关于position的讲解，也有很多他们属性之间的比较，但是比较全面的讲解还是比较少，每次看完过段时间就忘了，所以今天参考了很多网上现有的资源，自己整理一下，写下这篇文章。

position基本的值有五个：static、fixed、relative、absolute、inherit

static

是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页时，没有指定position，也就表示使用static。

relative

没有脱离文档流，此时可以使用top、bottom、left、right属性。

• top 和 bottom 共存时，使用top值，忽略 bottom值；
• left 和 right 共存时，使用left 值，忽略 right值；

relative是相对位置，指相对于元素的position为 static 时的位置；

• top 相对于static下移多少像素（若top为负值，则上移）
• right 相对于static左移多少像素 （若right为负值，则右移）
• bottom 相对于static 上移多少像素 （若bottom为负值，则下移）
• left 相对于static右移多少像素 （若left 为负值，则左移）

使用relative之后：

• 原来的空间不会被其他元素挤占
• 元素在最终位置时也不会挤占其他元素的空间，它浮动到其他元素的上方。

absolute

脱离布局流，此时可以使用top、bottom、left、right，但这些属性不再是相对于static时的位置，而是相对于containing block 的，相对于其边框内边缘的，而不是其padding内边缘。

使用absolute之后：

原来的空间会被其他元素挤占

元素在最终位置时也不会挤占其他元素的空间，它浮动到其他元素的上方。

fixed

他的模式与absolute相同，不过无论怎么拖动滚动条，他始终固定在屏幕的指定位置。在IE6中不支持这个属性；在IE7中支持这个属性但需要指明DOCTYPE；Firefox等浏览器支持这个属性。

top、bottom、left、right属性值指相对于视口的。

inherit

继续父元素的position值。

名词解释

视口-通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其他在屏幕上显示的区域）。