網頁層疊z index用法詳解

2021-05-11 09:44:06 字數 1543 閱讀 7120

最近在做定義元素順序的時候,用到z-index屬性,中間出了點小插曲,所以整理了一些資料給大家分享。希望對z-index屬性和用法還不太了解的朋友有一定的幫助。

z-index定義:

名稱:z-index

分類:定位

簡述:設定物件的層疊順序

概述:z-index是設定物件的層疊順序的樣式。該樣式只對position屬性為relative或absolute的物件有效。這裡的層疊順序也可以說是物件的「上下順序」。

它是一組css定位元素中的一元,要配合position使用.

可能的值

值             描述

auto         預設。堆疊順序與父元素相等。

number    設定元素的堆疊順序。

提示和注釋

注釋:元素可擁有負的 z-index 屬性值。

注釋:z-index 僅能在定位元素上奏效(例如 position:absolute;)!

說明

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。

例項

本例改變元素的堆疊順序:

default z-index is 0. z-index -1 has lower priority.

Z index 層疊上下文和層疊水平

層疊上下文是乙個概念上的東西,學過編譯原理的人應該對這裡的上下文很清楚,而層疊不過就是乙個詞罷了,解釋一下就是,根據層疊規則決定位置的乙個環境。還需要注意的一點是,具有層疊上下文的元素比普通元素要更靠近眼睛。層疊水平也是乙個概念上的東西,用大白話說就是 在乙個層疊上下文的環境下,裡面的元素在z軸上的...

層疊上下文與z index

z index是咱們之前相對比較常用的乙個語法了,看起來比較簡單的樣子,實際上還真不難,因為這東西跟之前講的vertical align不一樣,這個比較符合咱們的認知。好了,不廢話,開始咱們的正式話題。首先呢?咱們先要了解一下層疊上下文 stack context 是什麼呢,其實通俗來講,就是你看電...

css樣式,層疊順序屬性z index

在做專案的時候,居然單擊後顯示的順序一直被別的li標籤壓著,最後終於找到了,是css的z index屬性賦值了,值越大,顯示的層就越高 z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序...