前段時(shí)間記得似乎是誰在群里提出了一個實(shí)在是讓大家都覺得很不理解的一個問題：


假如我我們設(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會發(fā)現(xiàn)無論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級的下面。



試一下很輕易發(fā)現(xiàn)我們的子級，z-index的值達(dá)到了1000的被設(shè)定了position:absolut;子級都被檔在了父級的下面。我想了很久，我覺得其根本問題是：設(shè)置同樣的position:relative/absolute;同級標(biāo)簽之間的等級是無法用z-index超越的。我們上面的例子中的第一個LI的等級永遠(yuǎn)都要小于后一個LI的等級，所以我們在LI里的子級身上設(shè)置了position:absolute;，給了非常高的z-index值。

也許你會這樣來想：只要針對有span的LI設(shè)置position:relative;不就好了嗎？非常正確。當(dāng)其它的LI都不設(shè)置position:relative;那么我們需要的那個子級就可以浮在所有的內(nèi)容之上。但是假如實(shí)際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當(dāng)然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部是隱藏的，當(dāng)有鼠標(biāo)反應(yīng)時(shí)出現(xiàn)并且浮在所有的內(nèi)容之上。我們要知道，這確實(shí)是件讓人頭疼的事，因?yàn)槲覀兩厦嬉娮R到了，子級在顯示的時(shí)候都被壓在了下一個父級標(biāo)簽的下面。下面我們來實(shí)現(xiàn)一下這個鼠標(biāo)反應(yīng)的定位效果：


我們通過鏈接的鼠標(biāo)事件來完成這個顯示隱藏效果：



我們設(shè)定了a為position:relative;這樣他的子級就會根據(jù)父級的左上角為坐標(biāo)原點(diǎn)進(jìn)行定位了。然后我們設(shè)定span的具體外形以及定位屬性，然后把他隱藏了。我們再通過A的偽類:hover使得span被激活。我們看一下結(jié)果，我們會發(fā)現(xiàn)，所有應(yīng)該在上面的現(xiàn)在全在下面了。那我們怎么解決這個難題呢，其實(shí)以CSS想強(qiáng)行突破是不太可能，所以我們反過來想，能不能讓這個沒有被觸發(fā)的父級標(biāo)簽沒有position:relative;屬性，而只是觸發(fā)的時(shí)候才有級這個父級賦上這樣的值？其實(shí)想到這里基本上已經(jīng)可以解決所有的問題了：



我們只要針對a:hover來設(shè)定其屬性為position:relative;就可以了，這樣只有在鼠標(biāo)觸發(fā)的時(shí)候A才會被賦于一個相對定位的屬性。這樣就完成可以解決被其它父級標(biāo)簽所擋的尷尬了。

當(dāng)然假如不介意IE5這樣的瀏覽器我們還可以把代碼再做簡化：


CSS可以改成這樣：




原始閱讀：http://andymao.com/andy/post/67.html