定位详解、层级、滤镜遮罩笔记

1.      margin属性数值既可以是正值，也可以是负值（负值代表的是按原方向反方向移动）。
2.      元素的相对定位：position:relative;，它是相对原来的位置来定位的。元素相对定位后，定位元素的位置控制用”top/right/bottom/left:number”来定位元素偏移量。元素相对定位后，有以下特性：
a)        不影响元素本身的特性（原来是块，加了之后还是块；原来是内嵌，加了之后还是内嵌）；
b)        并未使元素脱离文档流；
c)        如果没有定位偏移量，对元素本身没有任何影响。
3.      元素的绝对定位：position:absolute;，如果有定位父级，它是相对于最近的定位父级发生偏移，如果没有定位父级，则它相对于整个文档发生偏移。元素绝对定位后，定位元素的位置控制用”top/right/bottom/left:number”来定位元素偏移量。元素绝对定位后，有以下特性：
a)        使元素完全脱离文档流；
b)        使内嵌支持宽高；
c)        使块属性标签内容撑开宽度；
d)        如果有定位父级（无论是相对定位，还是绝对定位），相对于最近的定位父级发生偏移，如果没有定位父级，则相对于整个文档发生偏移；
e)        相对定位一般都是配合绝对定位元素进行使用。
4.      层级层次高低：内部样式 < body < html < 文档，在内部样式中（即对于position属性值来说），默认后者层级高于前者。
5.      元素的定位层级：z-index:number;，一般用于position属性值后面，一般number值为1时，就可以让元素显示出来。定位层级别乱用，一般写到最后时再加，这样层级之间的关系会比较清晰。
6.      选择符样式优先级还有div#box意为拥有id叫box的div；a.box意为拥有class link3的a标签，他们和.class a的样式优先级是一样的。
 
7.      标准浏览器下的不透明度滤镜：opacity:0~1;（0为全透明，1为不透明）。
8.      IE浏览器有它自己的私有滤镜：filter:alpha(opacity=0~100);（0为全透明，100为不透明）。
 
9.      “width:100%;height:100%;”这两句可以保证漂浮层的宽高和整个页面的宽高相等。
10.  在将元素脱离文档流后，必须要给body和html加height:100%;，只有这样，才能让绝对元素脱离文档流后，让自己的元素宽高度的100%与文档对齐。
11.  如何让元素在页面中始终居于页面中部？首先，让元素绝对定位，再让元素据顶部50%，左部50%，再让元素拥有-50%盒子高度的margin-top值和-50%盒子宽度的margin-left值。注意盒子的总宽高=边框+宽高+内边框值。另外，别忘了本次笔记第9条。具体代码为“ position:absolute; top:50%; left:50%;margin-top:-（50%盒子高度的margin-top值）px; margin-left:-(50%盒子宽度的margin-left值)px;”。
 
12.  元素的固定定位：position:fixed;，特性与绝对定位基本一致，但差别是固定定位会始终相对整个文档进行定位。不过，它本身有个兼容性的问题：IE6下根本不支持固定定位，即根本没有这条命令。
13.   定位的其他属性值：
a)        “position:static;”表示默认值，即没有定位，取消元素本身的定位。可用于调试代码，用于取消定位。
b)        “position:inherit;”表示从父级元素继承定位元素的定位属性的值（继承这种东西在每一条css命令都会有，所以我们基本上不会用这条命令）。
 
14.  相对定位的问题：在IE6下父级单单“overflow:hidden;”是包不住子级的相对定位的；只有把父级元素也变成定位元素，并且“overflow:hidden;”，IE6下才能包住。
15.  绝对定位的问题：在IE6下，如果定位元素的父级宽高都为奇数，那么在IE6下定位元素的right和bottom都有一像素的偏差（指不能达到指定位置，而是让出了一像素）。
 
16.  清浮动的第八、九种方法：在浮动元素的父级加上“ position:absolute;”或者“ position:fixed;”，一般情况下不会特意用这种方法，而是在浮动元素的父级刚好有绝对或固定定位时，才会用到。这时候，为了简化代码，就不用多余的其他清浮动了。