网上也早有关于 position 的讲解,我个人觉得写得不全面,所以我才在迟到的今天写下这篇文章。
position 有五个值:static、relative、absolute、fixed、inherit。
static
是默认值。就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static。
relative
没有脱离布局流,此时可以使用 top、right、bottom、left 属性。
relative 是相对位置,指相对于元素的 position 为 static 时的位置:
使用 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。