CSS总结（五）——定位 position

一、定位position

 

1、static — 默认值

 

2、relative — 相对定位：

    脱离文档流，但文档流原先的位置遗留空白区域（即要占空间）

    定位起始位置为此元素原先在文档流的位置。

 

3、absolute — 绝对定位：

   脱离文档流，遗留下来的空间由后面元素填充

   定位起始位置为最近有定位的父元素，若没有定位的父元素，则为body文档本身

 

4、fixed — 固定定位：

类似absolute，但不随滚动条的改变而移动位置

其中：IE6不支持position：fixed；

 

二、css 的 z-index属性

当元素设置position：relative/absolute/fixed后，发生的偏移可能产生重叠；

利用z-index可控制堆叠顺序，值大的会重叠在值小的上面

z-index的值只决定同一父元素中的同级子元素的堆叠顺序

同级元素的z-index值相同，由元素在文档中位置决定，后出现的在上面

 

IE7设置z-index覆盖问题的解决方法：

   父级元素设为position：relative，则子级元素的z-index会被覆盖，应在父级元素设置z-index。

例：<div style="position:relative;z-index:2;">