想象一下这是三层纸叠在一起，最下面是橙色的div，中间是透明的span，最上面是透明的input，当选项选中时，span透明度变成1，就可见了，他们的堆叠顺序其实还是不变的

因为 input和span 都定义了position：absolute;即：脱离文本文档流，浮动了起来（飘起来了）在垂直方向上span 在input上边,所以你点击方框的时候点到的是span ，为了能点到input 就把 input的垂直坐标定义为100（z-index:100）,span的垂直坐标定义为1(z-index:1)，这样点击方框的时候就能点击到input标签里面的复选框了.

不知道我解释的明不明白？

span是没有点击功能的，除非用js或者jq给他添加一个点击事件，input的radio属性是有点击功能的，所以 input在span上一层点击之后，span的白色圆圈就会显示出来

一开始我是这么理解的：就是span上边一层有一个透明的按钮 这样就不会因为点到span的位置按钮被挡住

但是我看了这个之后http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html

在看这个彻底懵逼了