css元素z index設定為什麼不起作用?

2021-10-06 15:17:16 字數 1736 閱讀 5518

(x)html文件中的元素預設處於普通流(normal flow)中,也就是說其順序是由元素在文件中的先後位置決定的,此時一般不會產生重疊(但指定負邊距可能會產生重疊)。

當我們使用css為某個元素指定float浮動或者positoin定位後,元素的定位將會依據情況發生如下改變:

指定float值left/right 行內元素也會**變成塊元素,元素會脫離文件的普通流,向左或右浮動,直到其外邊緣碰到包含框或另乙個浮動框。

指定position值relative 可以相對於其在普通流中的位置偏移,原本所佔的空間仍保留。

指定position值absolute 行內元素也會**變成塊元素,元素會脫離文件的普通流,相對於最近的已定位祖先元素偏移,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊偏移。

指定position值fixed 元素會脫離文件的普通流,相對於瀏覽器視窗偏移,固定在瀏覽器的某個位置。

負邊距/float浮動

margin為負值時元素會依參考線向外偏移。margin-left/margin-top的參考線為左邊的元素/上面的元素(如無兄弟元素則為父元素的左內側/上內側),margin-right和margin-bottom的參考線為元素本身的border右側/border下側。一般可以利用負邊距來就行布局,但沒有計算好的話就可能造成元素重疊。堆疊順序由元素在文件中的先後位置決定,後出現的會在上面。 浮動元素會脫離文件的普通流,有可能覆蓋或遮擋掉文件中的元素。

position的relative/absolute/fixed定位

當為元素設定position值為relative/absolute/fixed後,元素發生的偏移可能產生重疊,且z-index屬性被啟用。z-index值可以控制定位元素在垂直於顯示屏方向(z 軸)上的堆疊順序(stack order),值大的元素發生重疊時會在值小的元素上面。

window視窗元素引發的重疊

瀏覽器解析頁面時,先判斷元素的型別:視窗元素優於非視窗元素顯示(也就是視窗元素會覆蓋在其它非視窗元素之上),同為非視窗型別才能在啟用z-index屬性控制堆疊順序。 flash元素屬於window視窗元素 所以如果頁面上flash元素和其他元素發生重疊,需要先將flash嵌入的wmode屬性的window(視窗,預設的會造成上面所說的問題)改為非視窗模式:opaque(非視窗不透明)或者 transparent(非視窗透明)。

使用前提

z-index只能在position屬性值為relative或absolute或fixed的元素上有效。

基本原理

z-index值可以控制定位元素在垂直於顯示屏方向(z 軸)上的堆疊順序(stack order),值大的元素發生重疊時會在值小的元素上面。

使用的相對性

z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值(如果有)為子元素定義了堆疊順序(css版堆疊「拼爹」)。

向上追溯找不到含有z-index值的父元素的情況下,則可以視為自由的z-index元素,它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值,決定其堆疊順序。

同級元素的z-index值如果相同,則堆疊順序由元素在文件中的先後位置決定,後出現的會在上面。 所以如果當你發現乙個z-index值較大的元素被值較小的元素遮擋了,請先檢查它們之間的dom結點關係,多半是因為其父結點含有啟用並設定了z-index值的position定位元素。

注意:最可能是父元素的 z-index 沒有設定的原因。

css 設定元素背景為透明

要設定某一元素的背景為透明,在 chrome firefox opera 下是這樣的 background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0 1之間。在 ie 中一般是這樣的 background color rgb 0,0,0...

css 設定元素背景為透明

要設定某一元素的背景為透明,在 chrome firefox opera 下是這樣的 background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0 1之間。在 ie 中一般是這樣的 background color rgb 0,0,0...

jQuery為元素設定css的問題

例子 有如下的html 對文字框設定字型大小為20px 即font size 20px 首先會想到如下 input css 由於屬性不能使用 分隔,所以會報錯 於是想到將屬性font size使用字串形式表示,即 input css 此時,正確。其實還有另一種寫法,就是font size屬性不使用字...