对Conten:”\20”、zoom:1及z-index: 1的理解

1、Conten:”\20”

.clear:after{content:”\20”;Display:block;Height:0;Clear:both;}

Content:’\20’;的意思是在.clear这个元素的后面加上一个空格，把\20改成020也是可以的，这整段CSS是在浏览器中创建一个分隔栏，把上下DIV隔开，避免DIV发生错位。但是如果单纯使用clear:both的话，就会产生一些浏览器兼容上的bug，而用content:”\20”的方式就是在DIV后面人工添加一个空格，这样就可以解决这一类的浏览器兼容问题。

2、zoom:1

是IE浏览器的专有属性，FF等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发IE的hasLayout属性，清除浮动、清除margin的重叠等。但是很遗憾，它通不过W3C验证。

3、 z-index: 1

概念：

z-index属性设置元素的堆叠顺序。数值越大越显示在上面；仅能在定位元素上凑效（例如：absolute，relative，fixed）
以divA、divB、divA-1、divB-1为例（代码顺序为divA在上，divB在下，divA是divA-1的子层，divB-1是divB的子层，divA、divB是同级）

层级关系的比较：

1. 对于同级元素，默认（positive：static）情况下divB会覆盖divA。
2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素覆盖z-index小的元素，即z-index越大优先级越高。
3. IE6/7下position不为static，且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。
4. z-index为auto的元素不参与层级关系的比较。

定位规则：

如果position设为relative（相对定位），absolute（绝对定位）或者fixed（固定定位），这样的节点会覆盖没有设置position属性或者属性值为static的节点，说明前者比后者的默认层级高。
在没有z-index属性干扰的情况下，我们可以做出更加复杂的结构。这里我对divA和divB都不设定position，但对divA的子节点divA-1设定position：relative。根据顺序规则，divB会覆盖divA，divA-1又会覆盖divB

默认值规则

如果所有节点都定义了position：relative. z-index大于等于1的节点会覆盖没有定义z-index的节点；z-index的值为负数的节点将被没有定义z-index的节点覆盖。

从父规则

如果divA、divB节点都定义了position：relative，divA节点的z-index比divB节点大，那么divA-1必定会覆盖divB-1。
如果所有节点都定义了position：relative，divA节点的z-index和divB节点一样大，但因为顺序规则，divB覆盖在divA前面。就算divA-1的z-index值比divB-1的大，divB-1还是会覆盖在divA-1的前面。
很多人将z-index设的很大，9999什么的，如果不考虑父节点的影响，设的在大也是没有用的。

运用javascript

如果你希望通过javascript为一个元素动态的加上z-index属性，其语法同其他大部分CSS元素能被存取类似，就是使用“驼峰命名法”取代CSS属性中的连字符，就像下面的代码展现的那样。

var myElement=document.getElementById(“ID”) ;myElement.style.position=”relative”;myElement.style.zIndex=”9999”;