z index屬性簡介

2021-09-08 02:58:44 字數 1077 閱讀 5981

z-index屬性簡介

引用:

z-index : auto | number

auto:預設值。

number:無單位的整數值,可為負數。

z-index 值較大的元素將疊加在z-index值較小的元素之上。對於未指定此屬性的定位物件,z-index 值為正數的物件會在其之上,而z-index 值為負數的物件在其之下。

注意:這個屬性不會作用於視窗控制項,如selct 物件。在ie 5.5+中,iframe 物件開始支援此屬性。而在之前的瀏覽器版本中,iframe 物件是視窗控制項,會忽略此屬性。

z-index屬性適用於定位元素(position 屬性值為 relative 或 absolute 或 fixed的物件),用來確定定位元素在垂直於顯示屏方向(稱為z軸)上的層疊順序(stack order)。

每乙個定位元素都歸屬於乙個stacking context。根元素形成root stacking context,而其他的stacking context則由定位元素產生(此定位元素的z-index被定義乙個非auto的z-index值),定位子元素會以這個local stacking context為參考,用相同的規則來決定層疊順序。並且stacking context和 containing block 之間並沒有必然聯絡。

當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)。你會發現無論a1的z-index是多大,也會被z-index是200的b所覆蓋,因為a的z-index只有100。

深入剖析z index屬性

一 z index七階層疊順序表 1.層疊順序的大小比較 background border 負z index block塊狀水平盒子 float浮動盒子 inline inline block水平盒子 z index auto或者看成z index 0 不依賴z index的層疊上下文 正z in...

zoom屬性 其它 和z index屬性 定位

一.zoom屬性 可設值1.0 100 小數,整數,百分數 作用,值為1.0就為原始大小,2就是兩倍如此類推 css中文手冊中的例子 您所看到的文字塊的名字是小強,的名字是旺財,請您從下方的選擇框內加減選擇旺財和小強的zoom值,看一看會發生什麼,然後您就會明白這個屬性的意義。希望您喜歡這本電子書。...

理解 CSS 的 z index 屬性

通常認為html頁面是二維的,但實際上,css還有乙個z index屬性,允許層疊元素。所有的盒模型元素都處於三維座標系中。除了我們常用的橫座標和縱座標,盒模型元素還可以沿著 z軸 層疊擺放,當他們相互覆蓋時,z軸順序就變得十分重要。假定元素沒有指定z index屬性,那麼元素按照如下順序疊放 從底...