z-index不適用於固定定位

時間 2020-02-09

原文原文鏈接

我有一個具備默認定位的div （即position:static ）和一個具備fixed位置的div 。 css

若是我設置元素的z索引，彷佛不可能使固定元素落後於靜態元素。 html

#over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; }

<!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div id="under"> </div> </body> </html>

或者在這裏的jsfiddle： http ： //jsfiddle.net/mhFxf/ web

我能夠經過在靜態元素上使用position:absolute來解決這個問題，可是有人能告訴我爲何會發生這種狀況嗎？ ide

（彷佛有一個相似的問題，這個問題，（固定位置打破了z-index ）但它沒有一個使人滿意的答案，所以我在這裏用個人示例代碼問這個問題） spa

#1樓

給#under一個負z-index ，例如-1 .net

發生這種狀況是由於在position: static;忽略了z-index屬性position: static; ，剛好是默認值; 因此在你編寫的CSS代碼中，不管你在#over設置#over ， z-index對於兩個元素都是1 。 pwa

經過給#under一個負值，它將落後於任何z-index: 1; 元素，即#over 。 code

#2樓

當元素位於正常流動以外時，它們能夠與其餘元素重疊。 htm

根據http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp上的重疊元素部分排序

#3樓

CSS規範中定義的固定元素（和絕對元素）的行爲：

它們在從文檔中分離時表現，並放置在最近的固定/絕對定位父級中。（不是逐字逐句）

這使得zindex計算有點複雜，我經過在body元素中動態建立一個容器並移動全部這些元素（在body-level元素中被分類爲「my-fixed-ones」）解決了個人問題（相同的狀況））

#4樓

我正在創建一個導航菜單。我有overflow: hidden在導航器的css中，隱藏了一切。我認爲這是一個z-index問題，但實際上我隱藏了導航以外的全部內容。

#5樓

這個問題能夠經過多種方式解決，但實際上，瞭解堆疊規則可讓您找到最適合您的答案。

解決方案

<html>元素是您惟一的堆疊上下文，所以只需遵循堆疊上下文中的堆疊規則，您將看到元素按此順序堆疊

堆疊上下文的根元素（本例中爲<html>元素）

具備負z-index值的定位元素（及其子元素）（較高值堆疊在較低值的前面;具備相同值的元素根據HTML中的外觀堆疊）

非定位元素（按HTML中的外觀排序）

z-index值爲auto的定位元素（及其子元素）（按HTML中的外觀排序）

具備正z-index值的定位元素（及其子元素）（較高值堆疊在較低值的前面;具備相同值的元素根據HTML中的外觀堆疊）

因此你能夠

將z-index設置爲-1，對於#under -ve z-index出如今非定位的#over元素後面
的位置設置#over以relative使第5條適用於它

真正的問題

在嘗試更改元素的堆疊順序以前，開發人員應該瞭解如下內容。

當造成堆疊上下文時
- 默認狀況下， <html>元素是根元素，是第一個堆疊上下文
堆疊上下文中的堆疊順序

下面的堆疊順序和堆疊上下文規則來自此連接

當造成堆疊上下文時

當元素是文檔的根元素時（ <html>元素）
當元素具備靜態之外的位置值和除auto以外的z-index值時
當元素的不透明度值小於1時
幾個較新的CSS屬性也會建立堆疊上下文。其中包括：轉換，過濾器，css區域，分頁媒體以及可能的其餘媒體。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
做爲通常規則，彷佛若是CSS屬性須要在屏幕外上下文中進行渲染，則必須建立新的堆疊上下文。

在堆疊上下文中堆疊順序

元素的順序：

堆疊上下文的根元素（默認狀況下， <html>元素是惟一的堆疊上下文，但任何元素均可以是堆疊上下文的根元素，請參閱上面的規則）
- 您不能將子元素放在根堆疊上下文元素後面
具備負z-index值的定位元素（及其子元素）（較高值堆疊在較低值的前面;具備相同值的元素根據HTML中的外觀堆疊）
非定位元素（按HTML中的外觀排序）
z-index值爲auto的定位元素（及其子元素）（按HTML中的外觀排序）
具備正z-index值的定位元素（及其子元素）（較高值堆疊在較低值的前面;具備相同值的元素根據HTML中的外觀堆疊）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。