一.相对定位小结

1.相对定位是相对自身位置进行位置调整

2.不脱离文档流

3.设置相对定位后，开启top,bottom,left,right,四个方位位置，优先选择top,left,

4.它的应用场景一般不用做自身位置调整，而是用于做绝对定位元素的容器样式

5.当定位出现堆叠效果，调整z-index值可以让元素的堆叠顺序发生变化，值越大，位置越靠前。

二.绝对定位小结

1.绝对定位元素，位置根据他最近一层的定位父级位置而确定

2.定位父级只要有定位属性就是定位父级，当绝对定位元素没有定位父级，它会一直往上层去找，一直找到html

3.元素设置绝对定位以后，完全脱离文档流，定位元素无法撑开父级的高度

4.当元素设置定位属性后，，left,top,并不是默认为0的位置，而是在定位之前的位置

5.绝对定位应用场景

①用于遮挡页和弹出框

②在用其他布局不影响其他元素布局情况下无法正常调整元素的位置，使用绝对定位

6.可以不考虑元素布局的先后顺序通过z-index来调整定位元素的堆叠顺序

7.不管是block元素或者inline元素，在设置绝对定位样式属性后元素便拥块属性

8.定位元素一般用四个方位值调整位置，不用margin让自身实际尺寸变大来调整位置，脱离文档流的绝对定位元素也是支持盒模型的。

z-index：用来提升定位元素的层级；z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效

定位元素不设置z-index相当于为0；

注意：设置定位的元素再去设置浮动是没有效果的。

设置定位元素的层级会提升，覆盖没有设置定位的元素，在定位元素都没有设置z-index的前提下，后面的定位元素覆盖前面的定位元素，如果设置了z-index，那么谁的值大，谁的层级高，谁就在最上层覆盖其他的定位元素，如果一样大，还是后面的覆盖前面的。

三.固定定位小结

1.固定定位是根据浏览器窗口进行位置调整

2.固定定位以后，元素脱离文档流

3.行标签设置固定定位后，页具有了块属性display变成了block

4.固定定位的应用场景

①消息广告弹窗

列子：

filter: alpha(opacity=50);

"filter: "alpha(opacity=50)";

filter这种用法是非标准用法，目的在与让ie8版本之前的版本兼容opactity

img{

width: 300px;

/*滤镜，现在主流浏览器都支持，包括ie8*/

/*filter: grayscale(100%);/*灰色处理*/

/*filter: opacity(50%);/*透明度处理*/

/*filter: blur(3px);*//*高斯模糊处理*/

/*  filter: brightness(200px);亮度处理*/

/*filter: drop-shadow(0px 0px 20px blue);*/

/*阴影处理

1.x轴的偏移量

2.y轴的偏移量

3.模糊度

4.阴影的颜色*/

/*filter: sepia(100%);深褐色处理*/

/*filter: hue-rotate(1800deg);色相旋转*/

/*filter: saturate(700%);饱和度处理*/