<fieldset id="0m0yu"></fieldset>
  • 

  • <cite id="0m0yu"><menu id="0m0yu"></menu></cite>
    <fieldset id="0m0yu"><menu id="0m0yu"></menu></fieldset>
    
<sup id="0m0yu"></sup>
  • 

    咨詢電話：024-31891684
    

    
網(wǎng)站建設(shè)|注冊(cè)|登錄 | 易勢(shì)大連分公司


     沈陽(yáng)網(wǎng)站制作易勢(shì)最專業(yè)
    ！
    

    


    ，-1為搜索整個(gè)頻道"/>






    
 


    


    
  
    
    
    
      
	



       
       
    【CSS】Z-index 屬性 當(dāng)前位置：首頁(yè)>主要服務(wù)>網(wǎng)站制作>html
    
        
    
         
    
         	                
    大多數(shù)的CSS屬性都很容易使用
    。常常當(dāng)您對(duì)標(biāo)記語(yǔ)言的元素使用CSS屬性時(shí)，產(chǎn)生的結(jié)果會(huì)隨著您刷新頁(yè)面而立即呈現(xiàn)
    。而另一些CSS屬性
    ，卻會(huì)有一些復(fù)雜
    ，且只能在給定的環(huán)境下才會(huì)工作。

    Z-index屬性便屬于上面所說的后面的那一組
    。Z-index無疑的比其他任何屬性都會(huì)頻繁的導(dǎo)致（兼容性）上的混亂和（開發(fā)者心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index
    ，你會(huì)發(fā)現(xiàn)它卻是一個(gè)非常容易使用的屬性，并且會(huì)為解決很多l(xiāng)ayout方面的挑戰(zhàn)提供強(qiáng)有力的幫助
    。

    在這篇文章里，我們會(huì)準(zhǔn)確的說明究竟什么是Z-index
    ，它為什么會(huì)這么不為人所了解
    ，并一起討論一些關(guān)于它的實(shí)際使用中的問題
    。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異
    ，那些存在于已有版本的IE及Firefox瀏覽器中的獨(dú)特問題
    。這篇關(guān)于Z-index屬性的全透視文章將會(huì)為那些有著良好基礎(chǔ)的開發(fā)者在使用Z-index屬性時(shí)提供強(qiáng)大的自信心及強(qiáng)有力的幫助。

    這是什么
    ？

    Z-index屬性決定了一個(gè)HTML元素的層疊級(jí)別。元素層疊級(jí)別是相對(duì)于元素在Z軸上（與X軸Y軸相對(duì)照）的位置而言
    。一個(gè)更高的Z-index值意味著這個(gè)元素在疊層順序中會(huì)更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)
    。



    為了更清晰的描述Z-index是如何工作的，上面的這張圖片夸大展示了層疊元素在視覺位置上的關(guān)系
    。

    自然的層疊順序

    在一個(gè)HTML頁(yè)面中
    ，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的
    。下面的是一個(gè)列表，它展示的列表項(xiàng)是處于一個(gè)層疊環(huán)境（stacking context
    ，暫時(shí)未找到合適的漢語(yǔ)翻譯，應(yīng)該是指層疊的元素所處的那個(gè)層疊的環(huán)境）中
    ，這些項(xiàng)是處于這個(gè)層疊環(huán)境的底部的
    。這個(gè)列表中的項(xiàng)都沒有被賦予Z-index屬性
    。

    元素的背景和邊框會(huì)創(chuàng)建一個(gè)stacking context 

    ·具有負(fù)值的stacking contexts元素，按照出現(xiàn)的先后順序排列（越靠后層級(jí)越靠上） 
    ·沒有被定位，沒有浮動(dòng)的塊級(jí)元素
    ，按照出現(xiàn)的先后順序排列 
    ·沒有被定位，浮動(dòng)的元素
    ，按照出現(xiàn)的先后順序排列 
    ·內(nèi)聯(lián)元素
    ，按照出現(xiàn)的先后順序排列排列 
    ·被定位的元素
    ，按照出現(xiàn)的先后順序排列


    Z-index 屬性，當(dāng)被正確使用的時(shí)候
    ，會(huì)改變自然的層疊順序。

    當(dāng)然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)
    ，否則元素的層疊順序并不會(huì)特別的明顯。下面的
    ，負(fù)邊距的BOX被拿來展示
    ，用以說明自然的層疊順序
    。



    上面的BOX被定義了不同的背景和邊框色，并且后兩個(gè)是交錯(cuò)的并且定義了負(fù)值的頂部邊距
    ，所以我們可以看到自然的層疊順序?div   id="jpandex"   class="focus-wrap mb20 cf">；疑腂OX在標(biāo)記中位于第一位
    ，藍(lán)色的BOX位于第二位
    ，金色的排在第三。應(yīng)用的負(fù)邊距明確的表明這個(gè)事實(shí)：這些元素未被設(shè)置Z-index 屬性
    ；它們的層疊順序是自然的
    ，或者是默認(rèn)的
    ，復(fù)合規(guī)則的
    。產(chǎn)生交錯(cuò)的現(xiàn)象都是因?yàn)樨?fù)值的邊距
    。

    為什么它會(huì)產(chǎn)生混亂
    ？

    即使Z-index并不是一個(gè)難以理解的屬性，但它卻會(huì)因錯(cuò)誤的假設(shè)而使很多初級(jí)的開發(fā)人員陷入混亂
    ?div   id="jfovm50"   class="index-wrap">；靵y發(fā)生的原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative 這三個(gè)定位屬性的元素中
    。

    為了證明Z-index只能工作于被定位了的元素中
    ，這里有同樣的三個(gè)BOX
      ，它們應(yīng)用了Z-index屬性來嘗試打破他們自然的層疊順序。



    灰色的BOX具有“9999”的Z-index值
      ，藍(lán)色的BOX有“500”的Z-index值，金色的有“1”的Z-index值
      。合乎邏輯的
      ，你會(huì)認(rèn)為這三個(gè)BOX的層疊順序會(huì)倒過來
      。但事實(shí)卻不是這樣，因?yàn)檫@些元素都沒被設(shè)定position屬性
      。

    下面是同樣的三個(gè)BOX，分別都被設(shè)置了position: relative
      ，他們的Z-index值還是按照上面那段設(shè)定
      。



    現(xiàn)在的結(jié)果是我們所期待的了：這些元素的層疊順序?qū)崿F(xiàn)了反向
      ；灰色的BOX覆蓋在藍(lán)色之上，藍(lán)色的覆蓋在金色之上
    。



    重復(fù)一下
    ，Z-index屬性只能工作于那些被定義了position屬性的元素中。這并沒有被足夠的重視
    ，尤其是對(duì)于那些新手。

    運(yùn)用JavaScript

    如果你希望通過JavaScript為一個(gè)元素動(dòng)態(tài)的加上Z-index 屬性
    ，其語(yǔ)法同其他大部分CSS元素能被存取類似
    ，就是使用“駝峰命名法”取代CSS屬性中的連字符
    ，就像下面的代碼展現(xiàn)的那樣
    。


    在IE 和 Firefox中的不當(dāng)解析（兼容性問題）

    在某些特定的情況下，關(guān)于Z-index 屬性的解析會(huì)在IE6
    、IE7以及Firefox2版本中存在一些小小的前后矛盾
    。

    IE中的<select>元素

    IE6中的<select>元素是一個(gè)窗口控件
    ，所以它總是出現(xiàn)在層疊順序的頂部而不會(huì)顧及到自然層疊順序、position屬性或者是Z-index
    。下圖展示的就是這個(gè)問題。



    <select>元素出現(xiàn)在了頂部
    ，它被設(shè)置了“相對(duì)定位”并且Z-index值為“1”
    。金色的BOX在這個(gè)層疊順序中排在了第二位
      ，它的Z-index值是“9999”。因?yàn)樽匀粚盈B順序及Z-index值的原因
      ，在我們目前所用的所有瀏覽器中金色的BOX都會(huì)排在頂部
      ，但I(xiàn)E6除外。



    這個(gè)IE6的BUG導(dǎo)致了很多覆蓋在<select>元素上的下拉菜單在彈出下拉選項(xiàng)時(shí)失敗的問題
      。一個(gè)解決辦法是使用JavaScript臨時(shí)隱藏<select>元素，等到下拉菜單的下拉項(xiàng)收回時(shí)再將<select>顯示出來
      。其他的辦法會(huì)涉及到使用<iframe>
      。

    IE6/IE7中被定位了的父容器

    因父容器（元素）被定位的緣故
      ，IE6/7會(huì)錯(cuò)誤的對(duì)其stacking context進(jìn)行重置。為了演示這個(gè)多少有些復(fù)雜的BUG
      ，我們?cè)僖淮蔚姆胖脙蓚€(gè)BOX
      ，但這次我們會(huì)將第一個(gè)BOX放置在一個(gè)被定位了的元素里
      。



    灰色BOX的z-index值是“9999”
      ；藍(lán)色BOX的z-index值是“1”
      ，這兩個(gè)BOX都被設(shè)置了position
    。所以，正確的執(zhí)行應(yīng)該是灰色的BOX覆蓋在藍(lán)色的之上
    。

    但是在IE6和IE7中
    ，我們卻會(huì)看到藍(lán)色的BOX處于灰色的之上。這是由灰色BOX外層的父容器也被設(shè)置了定位造成的
    。這兩款瀏覽器錯(cuò)誤的將被定位的父容器的stacking context進(jìn)行了“重置”
    ，但卻不應(yīng)該這樣?div   id="4qifd00"   class="flower right">
    ；疑腂OX擁有一個(gè)非常高的Z-index值
    ，它理應(yīng)因?yàn)樘幵谒{(lán)色BOX之上
    。其他的瀏覽器對(duì)這個(gè)問題會(huì)進(jìn)行正確的解析
    。 （我之前有一篇《z-index 屬性之IE/FF下同性不同貌》的博文，里面涉及的就是這個(gè)BUG）

    Firefox 2中的負(fù)值

    在Firefox2版本中
    ，一個(gè)負(fù)的Z-index值會(huì)使元素位于stacking context的后面
    ，而不是位于公認(rèn)的背景和邊框這樣的元素stacking context之前。下面的截圖展示了這個(gè)Firefox 2的BUG
    。



    下面的是上面截圖的HTML版本 
    ，如果你在Firefox 3或者其他目前正在被使用的瀏覽器中查看
    ，你會(huì)看到正常的解析結(jié)果：灰色BOX的背景（元素stacking context的基底）出現(xiàn)在所有實(shí)物的下面，并且灰色BOX內(nèi)部的文字出現(xiàn)在藍(lán)色BOX的上面
    。



     
    


    上一條資訊|返回欄目頁(yè)|下一條資訊
    


                
    





              

    		
    
    
  
    
  
    
  	
    沈陽(yáng)網(wǎng)站制作--網(wǎng)站前臺(tái)效果
    
    

    

       
 易勢(shì)網(wǎng)站制作
    ，以DIV+CSS為主，js/jQuery為輔
    ，制作利于優(yōu)化，頁(yè)面美觀的優(yōu)質(zhì)網(wǎng)站
    ！ 
    

    top 
  
    網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)