css相對定位設定index后里面內容不顯示

2021-03-04 06:03:42 字數 1768 閱讀 7975

1樓:育知同創教育

元素位置重疊的背景常識

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

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

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

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

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

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

元素位置重疊的可能原因

1. 負邊距/float浮動

margin為負值時元素會依參考線向外偏移。margin-left/margin-top的參考線為左邊的元素/上面的元素(如無兄弟元素則為父元素的左內側/上內側),margin-right和margin-bottom的參考線為元素本身的border右側/border下側。一般可以利用負邊距來就行佈局,但沒有計算好的話就可能造成元素重疊。

堆疊順序由元素在文件中的先後位置決定,後出現的會在上面。 浮動元素會脫離文件的普通流,有可能覆蓋或遮擋掉文件中的元素。

2. position的relative/absolute/fixed定位

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

3. window視窗元素引發的重疊

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

opaque(非視窗不透明)或者 transparent(非視窗透明)。

position定位及z-index使用

使用前提

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定位元素。

css怎麼設定滑鼠手勢,css怎麼設定滑鼠移動後的樣式

屬性名 cursor 屬性值 手勢狀態 auto 預設值。瀏覽器根據當前情況自動確定滑鼠游標型別。all scroll ie6.0 有上下左右四個箭頭,中間有一個圓點的游標。用於標示頁面可以向上下左右任何方向滾動。col resize ie6.0 有左右兩個箭頭,中間由豎線分隔開的游標。用於標示專案...

div css的絕對定位和相對定位

絕對定位 absolute 將被賦予此定位方法的物件從文件流中拖出,使用left,right,top,bottom等屬性相對於其最接近的一個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的,則依據 body 物件左上角作為參考進行定位。絕對定位物件可層...

怎麼設定手機定位,設定手機定位

手機定位的好方法,你是不是才知道 設定手機定位 手機定位的好方法,你是不是才知道 若手機 平板電腦需要使用定位服務,建議參考以下方法 1.雙指下拉機器頂簾,開啟gps定位功能 若不使用時,建議關閉 2.開啟設定 更多 定位服務 位置服務 位置 訪問的我的位置 滑動開關 允許應用程式使用位置資訊 可以...