前段時間記得好像是誰在群里提出了一個實在是讓大家都覺得很不理解的一個問題：
復制代碼 代碼如下:
ul>
li>第一塊/li>
li>span>第二塊/span>/li>
li>第三塊/li>
li>第四塊/li>
li>第五塊/li>
/ul>
如果我我們設定LI為position:relative;設置span為position:absolute;那么我們會發現無論SPAN的z-index值設置得再高都將永遠在后面父級的下面。
復制代碼 代碼如下:
*{margin:0; padding:0; list-style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
試一下很容易發現我們的子級，z-index的值達到了1000的被設定了position:absolut;子級都被檔在了父級的下面。我想了很久，我覺得其根本問題是：設置同樣的position:relative/absolute;同級標簽之間的等級是無法用z-index超越的。我們上面的例子中的第一個LI的等級永遠都要小于后一個LI的等級，所以我們在LI里的子級身上設置了position:absolute;，給了非常高的z-index值。
也許你會這樣來想：只要針對有span的LI設置position:relative;不就好了嗎？非常正確。當其它的LI都不設置position:relative;那么我們需要的那個子級就可以浮在所有的內容之上。但是如果實際上，所有的LI中都要有span，并且屬性都需要一樣怎么辦？當然我們不大會需要有這樣的效果。但是我們需要有這樣的效果：子級全部是隱藏的，當有鼠標反應時出現并且浮在所有的內容之上。我們要知道，這確實是件讓人頭疼的事，因為我們上面見識到了，子級在顯示的時候都被壓在了下一個父級標簽的下面。下面我們來實現一下這個鼠標反應的定位效果：
復制代碼 代碼如下:
ul>
li>a href="" title="">span>第一塊/span>/a>/li>
li>a href="" title="">span>第二塊/span>/a>/li>
li>a href="" title="">span>第三塊/span>/a>/li>
li>a href="" title="">span>第四塊/span>/a>/li>
li>a href="" title="">span>第五塊/span>/a>/li>
/ul>
我們通過鏈接的鼠標事件來完成這個顯示隱藏效果：
復制代碼 代碼如下:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;}
li span {display:none;}
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}
123下一頁閱讀全文
您可能感興趣的文章:- javascript css styleFloat和cssFloat
- javascript css float屬性的特殊寫法
- css 跨瀏覽器實現float:center
- CSS中Float（浮動）相關技巧文章
- javascript下操作css的float屬性的特殊寫法
- css position: absolute、relative詳解
- CSS定位中Positoin、absolute、Relative的一些研究
- Div CSS absolute與relative的區別小結
- position:relative/absolute無法沖破的等級
- 解決rs.absolutepage=-1的問題
- 詳細分析css float 屬性以及position:absolute 的區別
