css的定位(position)

CSS使用position选项来定义元素的定位属性，该选项有5个可选值：static、relative、absolute、fixed、inherit，默认值为static。inherit属性表示继承父元素的定位属性。

1、相对定位

相对定位就是指相对于文档流中的其他已定义的元素位置进行定义。
注：对于脱离文档流的元素，比如设置了浮动或者绝对定位的元素不会对相对定位产生影响。

（1）static（默认值）

如果使用默认值，在CSS中为元素定义top、left、right、bottom、z-index都不会生效。换句话说，如果想设置元素的偏移量和z-index，必须为元素定义positon属性（static除外）。

（2）relative

relative的表现和默认值一样，只不过可以通过设置偏移量和z-index来控制相对于其正常位置进行的偏移。

2、绝对定位

绝对定位的元素有以下几个特点：

• 块级元素的宽度在未定义时不再是100%，而是根据内容自动进行调整。
• 在不定义z-index的情况下，absolute元素会覆盖在其他元素之上。
• 它会脱离正常的文档流，不再占据空间，类似于浮动后的效果。

（1）absolute

absolute是相对于上一个不为static的父元素进行绝对定位。换句话说，如果不指定父元素的position，absolute将相对于整个html文档进行绝对定位。
如果想让absolute元素相对container进行绝对定位，可以为container定义position:relative。

（2）fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。也就是说，不论网页如何进行滚动，该元素始终停留在屏幕的某个位置上。
注：IE6和IE7不支持fixed属性，此时可以用absolute来模拟fixed效果。