想象一下這是三層紙疊在一起，最下面是橙色的div，中間是透明的span，最上面是透明的input，當(dāng)選項(xiàng)選中時(shí)，span透明度變成1，就可見了，他們的堆疊順序其實(shí)還是不變的

因?yàn)?input和span 都定義了position：absolute;即：脫離文本文檔流，浮動(dòng)了起來（飄起來了）在垂直方向上span 在input上邊,所以你點(diǎn)擊方框的時(shí)候點(diǎn)到的是span ，為了能點(diǎn)到input 就把 input的垂直坐標(biāo)定義為100（z-index:100）,span的垂直坐標(biāo)定義為1(z-index:1)，這樣點(diǎn)擊方框的時(shí)候就能點(diǎn)擊到input標(biāo)簽里面的復(fù)選框了.

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

span是沒有點(diǎn)擊功能的，除非用js或者jq給他添加一個(gè)點(diǎn)擊事件，input的radio屬性是有點(diǎn)擊功能的，所以 input在span上一層點(diǎn)擊之后，span的白色圓圈就會(huì)顯示出來

一開始我是這么理解的：就是span上邊一層有一個(gè)透明的按鈕 這樣就不會(huì)因?yàn)辄c(diǎn)到span的位置按鈕被擋住

但是我看了這個(gè)之后http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html

在看這個(gè)徹底懵逼了