大踏步走

记得以前最初接触css，教材里总是讲：属性值的后一定要带单位，除非值是0才可以省略。于是在日后的样式中我处处小心，总怕忘记哪个给少写了。
直到今天，就因为多写了一个单位，却折腾了我好半天。。。
实例：
原结构：

<div id="container">
<div id="box1">这个box静态定位，要在上面显示！</div>
<div id="box2">这个box动态定位，总是贴底边显示！</div>
</div>

根据需求，重新调整下布局：

<div id="container">
<div id="box1">这个box静态定位，要在上面显示！</div>
</div>
<div id="box2">这个box动态定位，总是贴底边显示！</div>

css样式如下：

#container {width:100%; position:absolute; left:0; top:0;}
#box1 {width:200px; height:150px; background:#f00; margin:10px auto 0;}
#box2 {width:100%; height:30px; background:#999; position:absolute; left:0; bottom:0;}

预览：

浏览器窗口最大化时显示正常。但当改变浏览器窗口大小，box2就会浮在box1之上，这样会影响box1内容的显示，不妥；根据客户需求，当改变窗口大小，如果box1和box2重叠，box2要显示在box1后面。

根据蓝色14px关于《理解五条叠加法则，自由使用层的叠加》介绍：“同级元素定位方式相同，无z-index时，html靠后者居上；如果同时设置z-index，值大者居上”的原则，由于现#container和#box2是同级元素，分辨设置其z-index值为100px和0；再预览，发现没有效果，再改再测…问题就出在这里，为什么不生效呢？
反复测试，当将z-index:100px的单位px去掉，奇迹出现啦，终于显示正常！！
又翻了css使用手册，得到正解：

z-index：
 

语法取值
auto:默认值。遵从其父对象的定位。
number:无单位的整数值。可为负数。

大多数属性是必须要带单位的，但这个确实没有！

类似还有一个属性zoom，也是无单位值的，如果还有其他，请朋友们多补充。。。

写出来记录下，证明自己没白折腾。文辞贫乏，朋友们愿意看就忍着点，见笑了~~