position 的 static、relative、absolute、fixed、inherit

网上也早有关于 position 的讲解，我个人觉得写得不全面，所以我才在迟到的今天写下这篇文章。

position 有五个值：static、relative、absolute、fixed、inherit。

static

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

relative

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

• 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、right、bottom、left，但这些属性不再是相对于 static 时的位置，而是相对于 containing block 的，相对于其边框内边缘的，而不是其 padding 内边缘。

使用 absolute 之后：

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

fixed

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

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

inherit

继续父元素的 position 值。

名称解释

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

关于演示

本地就不演示了，您可以在这个网站上查看一些演示：http://zh.html.net/tutorials/css/lesson14.asp。