【web前段标题】

position:fixed 固定定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动

 特性：
    1.元素脱离正常文档流，不占位(也脱离文本流，全脱)
    2.始终相对于浏览器窗口四个角为原点进行固定定位的
    3.不会随页面的内容滚动而滚动
    4.能使不能设置宽高的行级元素设置宽高
    5.提升层级
    6.如果没有定位偏移属性，对元素本身有影响；

应用场景：相对于窗口的元素，比如弹窗，跟随滚动的导航，侧边栏。注意子元素设置绝对定位，父元素可以设置相对定位，绝对定位，固定定位，这三种情况，参照原宿都是父元素。

position：static 静态定位

表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 1、常用于重置 定位属性。2、静态定位的元素不会受到 top, bottom, left, right影响。

 语法: z-index: n;

    标签添加定位之后，可以覆盖在页面的其他标签上
    后面加载的定位元素默认会覆盖在先加载的定位元素上

特性：
       1.z-index的属性值越大，它的层级就越高
       2.属性值可以取值为正数，0，负数，没有单位（整数）
       3.属性值取值相同的情况下，按照结构中的顺序排列次序，后来居上
       4.正值向上调整层级，负值向下调整层级
       注意：z-index属性要与定位一起使用才有效，否则无效

实现盒子居中的方法1、使用margin属性的负间距实现具有width属性和height属性的绝对定位元素的居中。2、实现思路：left,right,top,bottom并用，配合margin：auto; 注意：ie低版本不兼容。注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置。

定位于浮动的区别

float：left | right 。脱离了文档流，不脱离文本流，半脱离

position：absolute fixed

1、脱离了文档流，脱离文本流，全脱离。

2、绝对定位和固定定位脱离正常标准流脱离文本流 全脱

3、浮动只脱离正常标准流不脱离文本流

4、都可以使行级标签支持宽高

5、元素设置绝对固定浮动之后，就不在区分标签类型了，类似于行内块标签

opacity 透明度

1、兼容性：IE6、7、8下不兼容，IE9+支持

2、使用 将内容（及所有后代）、背景一起透明，自身透明，子元素也透明

3、取值 范围0-1之间表示半透明 0表示完全透明 1表示完全不透明

filter属性

 

1/兼容性：仅仅支持IE6、7、8、9，在IE10及以上被废除

2/使用： IE浏览器专属

3、语法 filter:Alpha(opacity=n) n的取值在0-100之间表示半透明，0表示完全透明，100表示完全不透明

4、想用filter实现父元素背景透明，子元素不透明：

父元素加静态定位,子元素加相对定位,能阻止透明度的传递

阴影 1、盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）

h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。  必需    单位： px
v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。   必需   单位： px
blur：阴影模糊度，不能取负数。 可选    单位： px
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选    单位： px
inset：表示添加内阴影，默认为外阴影。可选  

文字阴影

text-shadow: h-shadow v-shadow blur color;
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;

h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊距离；
color 可选，阴影的颜色；