主頁 > 知識庫 > relative absolute無法沖破的等級問題解決第1/3頁

relative absolute無法沖破的等級問題解決第1/3頁

熱門標簽:快速更改地圖標注點標 蘇州做電話機器人 地圖標注樓盤 南山電話機器人 隨州外呼系統(tǒng)廠家 地圖標注微信好友 南昌電話機器人系統(tǒng) ai電話機器人效果差 沈陽400電話辦理多少錢
前段時間記得好像是誰在群里提出了一個實在是讓大家都覺得很不理解的一個問題: 
復(fù)制代碼 代碼如下:

ul>  
li>第一塊/li>  
li>span>第二塊/span>/li>  
li>第三塊/li>  
li>第四塊/li>  
li>第五塊/li>  
/ul> 
 
       如果我我們設(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會發(fā)現(xiàn)無論SPAN的z-index值設(shè)置得再高都將永遠在后面父級的下面。 
復(fù)制代碼 代碼如下:

*{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;}  

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

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

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>  

我們通過鏈接的鼠標事件來完成這個顯示隱藏效果: 
復(fù)制代碼 代碼如下:

*{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 跨瀏覽器實現(xiàn)float:center
  • CSS中Float(浮動)相關(guān)技巧文章
  • javascript下操作css的float屬性的特殊寫法
  • css position: absolute、relative詳解
  • CSS定位中Positoin、absolute、Relative的一些研究
  • Div CSS absolute與relative的區(qū)別小結(jié)
  • position:relative/absolute無法沖破的等級
  • 解決rs.absolutepage=-1的問題
  • 詳細分析css float 屬性以及position:absolute 的區(qū)別

標簽:玉樹 商洛 大同 石家莊 濰坊 昭通 濰坊 深圳

巨人網(wǎng)絡(luò)通訊聲明:本文標題《relative absolute無法沖破的等級問題解決第1/3頁》,本文關(guān)鍵詞  relative,absolute,無法,沖破,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《relative absolute無法沖破的等級問題解決第1/3頁》相關(guān)的同類信息!
  • 本頁收集關(guān)于relative absolute無法沖破的等級問題解決第1/3頁的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章