CSS教程:IE中的z-index迷惑(1)_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS的z-index屬性,看下面的介紹:
z-index屬性適用于定位元素(position 屬性值為 relative 或 absolute 或 fixed的對象),用來確定定位元素在垂直于顯示屏方向(稱為Z軸)上的層疊順序(stack order)。
每一個定位元素都歸屬于一個stacking context。根元素形成root stacking context,而其他的stacking context則由定位元素產(chǎn)生(此定位元素的z-index被定義一個非auto的z-index值),定位子元素會以這個local stacking context為參考,用相同的規(guī)則來決定層疊順序。并且stacking context和 containing block 之間并沒有必然聯(lián)系。
當stacking context一樣的時候,就用z-index的值來決定怎樣顯示,假如z-index也相同(即stack level相同),則按照檔中后來者居上的原則(back-to-front )的順序來層疊。
當任何一個元素層疊另一個包含在不同stacking context元素時,則會以stacking context的層疊級別(stack level)來決定顯示的先后情況。也就是說,在相同的stacking context下才會用z-index來決定先后,不同時則由stacking context的z-index來決定。例如:
定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟關系(z-index:200)。你會發(fā)現(xiàn)無論A1的z-index是多大,也會被z-index是200的B所覆蓋,因為A的z-index只有100。
閱讀更具體的內容:http://www.w3.org/TR/CSS21/visuren.html#z-index
示例代碼 [www.wf0088.com]
z-index : auto | number
auto: 默認值。
number: 無單位的整數(shù)值,可為負數(shù) 。
z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象,z-index 值為正數(shù)的對象會在其之上,而 z-index 值為負數(shù)的對象在其之下。
注重:這個屬性不會作用于窗口控件,如 select 對象。
在IE5.5 中, iframe 對象開始支持此屬性。而在之前的瀏覽器版本中, iframe 對象是窗口控件,會忽略此屬性。
auto: 默認值。
number: 無單位的整數(shù)值,可為負數(shù) 。
z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象,z-index 值為正數(shù)的對象會在其之上,而 z-index 值為負數(shù)的對象在其之下。
注重:這個屬性不會作用于窗口控件,如 select 對象。
在IE5.5 中, iframe 對象開始支持此屬性。而在之前的瀏覽器版本中, iframe 對象是窗口控件,會忽略此屬性。
z-index屬性適用于定位元素(position 屬性值為 relative 或 absolute 或 fixed的對象),用來確定定位元素在垂直于顯示屏方向(稱為Z軸)上的層疊順序(stack order)。
每一個定位元素都歸屬于一個stacking context。根元素形成root stacking context,而其他的stacking context則由定位元素產(chǎn)生(此定位元素的z-index被定義一個非auto的z-index值),定位子元素會以這個local stacking context為參考,用相同的規(guī)則來決定層疊順序。并且stacking context和 containing block 之間并沒有必然聯(lián)系。
當stacking context一樣的時候,就用z-index的值來決定怎樣顯示,假如z-index也相同(即stack level相同),則按照檔中后來者居上的原則(back-to-front )的順序來層疊。
當任何一個元素層疊另一個包含在不同stacking context元素時,則會以stacking context的層疊級別(stack level)來決定顯示的先后情況。也就是說,在相同的stacking context下才會用z-index來決定先后,不同時則由stacking context的z-index來決定。例如:
定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟關系(z-index:200)。你會發(fā)現(xiàn)無論A1的z-index是多大,也會被z-index是200的B所覆蓋,因為A的z-index只有100。
閱讀更具體的內容:http://www.w3.org/TR/CSS21/visuren.html#z-index
相關CSS教程:
- 相關鏈接:
- 教程說明:
CSS教程-CSS教程:IE中的z-index迷惑(1)。