Firefox：溢出如何與z-index一起工作並且位置是固定的？

我感到困惑的是如何對CSS的z-index，溢出隱藏，位置固定的工作一起在Firefox 3.6中。考慮下面的例子：Firefox：溢出如何與z-index一起工作並且位置是固定的？

第一DIV.fix_z0被固定位置與z索引0和溢出隱藏。裏面是DIV.abs_z1絕對用z-index位置1.內被DIV.fix_z2固定位置和z-index的2.我希望所有的.fix_z2是可見的，即使它是.fix_z0視區之外，因爲它是固定和有比底部DIV更高的Z指數。

在IE 8中，按預期工作，但在FF 3.6中，DIV.fix_z2被限制爲.fix_z0。兩個元素都是固定的，但其中一個嵌套在另一個內。 W3C規範指出應該將固定元素從文檔流中刪除，但嵌套時會發生什麼？此外，由於包含的元素.abs_z1具有較高的z-index，這應該成立一個新的z-index背景下，一切都在.abs_z1應高於.fix_z0（使上.fix_z2無關的z-index的，但我把它，看它是否製成的差異。）

的複雜因素是在z索引。如果我們取一個替代示例中，內部.fix_z0DIV.abs_znone一個與絕對位置和無z索引。這裏面，我們把DIV.fix_z1固定位置和z索引1.現在DIV.fix_z1不受.fix_z0裁剪。在我看來，無論是應該削減或兩者都不應該削減。這是一個錯誤還是我誤解了CSS的規則？以下是重現的代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Z-Index Woes</title> 
<style type="text/css"> 
    body { 
     background-color: black; 
    } 

    div.fix_z0 { 
     position: fixed; 
     left: 100px; 
     top: 100px; 
     bottom: 100px; 
     right: 100px; 
     background-color: #606060; 
     overflow: hidden; 
     z-index: 0; 
    } 

    div.abs_z1 { 
     position: absolute; 
     left: 50px; 
     top: 50px; 
     width: 200px; 
     height: 200px; 
     background-color: #550000; 
     z-index: 1; 
    } 

    div.fix_z2 { 
     position: fixed; 
     left: 50px; 
     top: 50px; 
     width: 150px; 
     height: 150px; 
     background-color: #888800; 
     z-index: 2; 
    } 

    div.abs_znone { 
     position: absolute; 
     right: 50px; 
     bottom: 50px; 
     width: 200px; 
     height: 200px; 
     background-color: #005500; 
    } 


    div.fix_z1 { 
     position: fixed; 
     right: 50px; 
     bottom: 50px; 
     width: 150px; 
     height: 150px; 
     background-color: #888800; 
     z-index: 1; 
    } 

    p { 
     position: absolute; 
     font-size: 12pt; 
     color: #EFEFEF; 
     margin: 0; 
     padding: 0; 
    } 

    p.center { 
     text-align: center; 
     width: 100%; 
    } 

    p.right { 
     right: 0; 
    } 

    p.bottom { 
     bottom: 0; 
    } 

</style> 
</head> 
<body> 
    <div class="fix_z0"> 
     <p class="center">pos: fixed, z:0, overflow: hidden</p> 
     <div class="abs_z1"> 
      <p class="right">pos: abs, z:1</p> 
      <div class="fix_z2"> 
       <p class="right bottom">pos: fix, z:2</p> 
      </div> 
     </div> 
     <div class="abs_znone"> 
      <p>pos: abs, z: none</p> 
      <div class="fix_z1"> 
       <p>pos: fix, z:1</p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

更新11/18/10：這兩種看法似乎迄今表明，.fix_z2和.fix_z1應該由.fix_z0被裁剪。這將使示例代碼中IE8 100％錯誤和FF 50％錯誤。

我認爲兩者的DIV不應被裁剪，因爲它們是固定的。 W3C建立固定定位爲絕對的子集和絕對定位的元素：

建立用於正常流動兒童和絕對新的包含塊（但不固定）定位後裔。 [W3C]

因此，我認爲既不.fix_z0或.abs_z1或.abs_znone應該建立一個新的包含塊，通過該確定的內容被限幅。

W3C的Z-索引標準值是：

整數：此整數是在當前堆疊內容所生成的框的層疊級別。盒子還建立一個局部堆疊上下文，其中它的堆棧級爲「0」。

auto：當前堆棧上下文中生成的框的堆棧級別與其父級框相同。該框不會建立新的本地堆疊上下文。

http://www.w3.org/TR/CSS21/visuren。HTML＃z-index的

我不明白爲什麼z-index的影響FF，但它具有以下作用：由於.abs_znone沒有z-index的，它具有相同的堆疊內容作爲其父.fix_z0和.fix_z1將有一個Z指數相對於.fix_z0的任何子女。結果是DIV.fix_z1不被.fix_z0截斷。相反，.abs_z1建立了新的堆疊內容，因爲它有一個Z-index和.fix_z2將有相關的z-index到.abs_z1任何孩子，但出於某種原因，這導致.fix_z2通過.fix_z0

底線被修剪：我仍在尋找一些答案。 IE或FF在這裏遵守標準嗎？什麼導致FF中的一個DIV發生削波而不是另一個？我目前的看法是，IE是正確的（對於一個變化），FF的行爲是錯誤的。

來源

2010-11-17 Jared

看起來FF顯示器是正確的。如果你有溢出：隱藏在一個元素上，所有的子元素只有在父對象的邊界內纔會被顯示。

來源

2010-11-17 20:32:47 wajiw

我同意你的邏輯，但如果這是真的，所以fix_z1也應該被修剪，因爲它是fix_z0的後代。相反，它不會被剪切。 – Jared 2010-11-17 21:20:31

這個問題的一個變種被問到here，其中一個答覆者給了this link來解決，但那是IE7。我嘗試了doctype建議，但沒有產生任何立即結果。

（順便說一句，在你的代碼示例，如果你給.abs_znone的z-index，即它關係到其父親，並且它的行爲正確。線索，也許？）

來源

2010-11-18 01:46:53 Ben

這些問題確實涉及z-index，但與我的情況不同。他們更多的是關於分層，我的問題是裁剪。在我的情況下，IE實際上正在做我想做的事情，FF也不是，因此我並不想用IE來「修復」任何東西。 z-索引似乎在FF中有一些削減副作用，我對目前的帖子有不同意見，關於IE行爲是否符合標準。看到我的問題更新。 – Jared 2010-11-19 03:07:47

Firefox：溢出如何與z-index一起工作並且位置是固定的？

回答

相關問題