CSS的position的用法简介

CSS position 属性

这个属性定义建立元素布局所用的定位机制。

任何元素都可以定位，不过绝对(absolute)或固定(fixed)元素会生成一个块级框，而不论该元素本身是什么类型。

相对(relative)定位元素会相对于它在正常流中的默认位置偏移。

默认值： static

继承性： no

版本： CSS2

JavaScript 语法： object.style.position="absolute"

浏览器支持：

所有主流浏览器都支持 position 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

position的值：

absolute 

生成绝对定位的元素，相对于除 static 定位以外的第一个父元素进行定位。

元素内容完全从正常流中脱离出来，不再占用原正常流的空间。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 

生成绝对定位的元素，相对于浏览器窗口进行定位（固定定位，一种特殊的绝对定位）。

元素内容完全从正常流中脱离出来，不再占用原正常流的空间。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 

生成相对定位的元素，相对于其在正常流中的默认位置进行定位。

定位后，仍占用原正常流的空间。

因此，"left:50" 会使元素右移 50 像素，但原正常流的空间并不变化。

static 

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 

规定应该从父元素继承 position 属性的值。