第六节 定位详解、层级、滤镜遮罩

首先解释下定位偏移量和层级的概念。定位偏移量有四个，即top/right/bottom/left，属性值是数字+px，在给元素定位了之后，需要告诉元素往什么方向进行定位。比如left:30px;就是告诉元素要向左偏移30px。层级表示方法：z-index:[number]。层级就是将咱的页面分成不同的层次，使用z-index可以规定元素所在的层级。不建议常用，因为放在打的项目里边，层级会非常混乱。

默认情况下，定位元素层级是后者高于前者。

1、relative相对定位

position:relative;  相对定位，表示相对于原来位置偏移。特点如下

Ø  不影响元素本身的特性；

Ø  不使元素脱离文档流；（元素移动位置后原始位置依然保留）

Ø  如果没有定位偏移量，对元素本身没有任何影响；

Ø  提升层级

定位元素位置控制

    top/right/bottom/left  定位元素偏移量。

2、absolute绝对定位

   position:absolute; 绝对定位

Ø  使元素完全脱离文档流，元素一旦成为绝对定位，则相当于漂浮在空中一般，不再占用文档中位置。就像一桶水中有个西瓜，把西瓜拿出来（定位决定定位）后，其他的谁会自动补充西瓜的位置。

Ø  使内嵌支持宽高；

Ø  可以使块属性标签内容撑开宽度；

Ø  如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

Ø  相对定位一般都是配合相对定位元素使用；

Ø  提升层级

3、position:fixed；固定定位

       与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；

       问题：IE6不支持固定定位；

4、定位的兼容问题、解决方法

a)       position:relative;

在 IE6 下父级的 overflow:hidden;包不住子级的relative;也就是说，父级设置了 overflow:hidden;而子元素是一个相对定位元素，这时父级是包不住子元素的。

解决办法：给父级加同样的定位

b)       position:absolute;

在 IE6 下定位元素