htnl中的遮罩层以及定位方式

在页面显示遮罩层，例如：一个div的css样式：

1 $msk.css({
2     "top":"0", "left":"0", 
3     "position":"fixed", "display":"block", 
4     "width":"100%", "height":"100%", 
5     "background":"white", "zIndex":"500", 
6     "opacity":"0.3", "filter":"Alpha(opacity=30)" 
7 });

1：定位方式：

        absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

                 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

       fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

                元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

       relative：生成相对定位的元素，相对于其正常位置进行定位。

　　　　    因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

       static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　　　    inherit 规定应该从父元素继承 position 属性的值。

2：显示方式：

         none : 此元素不会显示

         block: ：“此元素会块级显示此元素前后会带有换行符

3：显示顺序：zIndex

       该元素设置元素的堆叠顺序，设置一个定位元素沿z轴的位置，z轴定义为垂直显示区的轴，如果为正数，则离用户更近，为负数则表示离用户更远。

   　 简单的说：z-index主要 用于空间位置上层叠关系   调整，z-index属性的值越大，视觉上该元素离我们越近。

　　 注释：元素可拥有负的 z-index 属性值。

　　 注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

4：显示透明度：　

   opacity：（0-1的小数）；
   0表示完全透明，1表示完全不透明。
   eg: opacity:1.0; 
       filter:alpha(opacity=100);  (此方法可以调节兼容性)

5：定位方式扩展：

 一、静态定位：position: static;

静态定位 （static）是浏览器默认设定的定位方式，在这种方式下，每个块元素都新起一行显示，而块元素的间隔、边框等则由具体网页的CSS样式表规则确定。它简单地遵循文档的普通流动。当元素是静态定位时，top和left属性无效。

二、相对定位：position: relative;（重要）

这种定位形式与静态定位非常相似，因为元素会继续遵循文档的普通流动，除非受到其他指令的影响。但是，设置top或者left属性会引起元素相对于它的原始（静态）位置进行偏移。盒子以原来的位置为

基准进行移动， 有四个属性top、bottom、left、right，通过设置具体的属性值，盒子在该 方向上移动一定的距离。相对定位的方式，盒子并未脱离标准流，它对兄弟盒子的定位没有任何影响，就好像该相对定位的元素还在原地一样。

三、绝对定位：position: absolute;（重要）

绝对定位的元素完全跳出页面布局的普通流动，它会相对于它第一个非静态定位的祖先元素而展示。如果没有这样的祖先元素，则相对于整个文档。

使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素（父盒子）”为基准定位，这里的“已经定位”表示的是使用了除了 static方式以外的其他元素定位方式进行定位，如果没有，则以里游览器窗口为基准。绝对定位的盒子脱离了文档流，它的兄弟盒子定位时视其为“不存 在”。

四、固定定位：position: fixed;

固定定位把元素相对于浏览器窗口而定位。设置元素的top和left为0会使它显示在浏览器左上角，它完全忽略浏览器滚动条的拖动，一直会出现在用户的视野。

固定定位（fixed）与绝对定位的方式类似，有一点不同就是固定定位的盒子以浏览器窗口为基准，而不去关心父盒子是否已定位。