css在windows和mac之間的FF/chrome上的絕對定位不同

我正在使用下面的測試。在我的mac上的firefox/chrome/safari中，panel1呈現在panel2上方。但在我的Windows機器上的Firefox/Chrome上，它呈現在下面。css在windows和mac之間的FF/chrome上的絕對定位不同

我希望panel1直接放在panel2上。什麼是應該做的正確方法？：

<html> 

    <head> 
    </head> 

    <body> 

     <!-- Appears on top of panel2 in safari/chrome/ff on mac, but underneath on windows. --> 
     <div id='panel1' style='z-index:6; position:absolute; width:100px; height:100px; background-color:red'> 
     </div> 

     <div id='panel2' style='z-index:3; width:100px; height:100px; background-color:yellow'> 
     </div> 

    </body> 

</html>

我被這一招在以前的問題。我無法設置panel1（我認爲）的頂部/左側位置，因爲它位於更大的div區域中，隨着用戶調整瀏覽器框架的大小，它將在屏幕上移動。

感謝

----------- -------------更新

試過明確設置的z-index兩個div的，那工作。

來源

2010-08-01 user246114

僅供參考，這裏是一個頁面，它給出了一些默認z-index的例子。嘗試按照建議明確設置它。 https://developer.mozilla.org/zh/Understanding_CSS_z-index/Stacking_without_z-index – 2010-08-01 22:45:37

如果元素有不同的'流'，IIRC'z-index'不會改變事物（忘記它在規範中被稱爲什麼）。因爲一個div具有靜態位置，另一個具有絕對位置，所以它們的z-索引不相關。 – strager 2010-08-01 22:52:25

另外，在帖子中使用確切的標記，這似乎在所有瀏覽器中顯示紅色：http://jsbin.com/ehuho3 – strager 2010-08-01 22:54:35

<div id='panel2' style='z-index:3; width:100px; height:100px; background-color:yellow'> 
    </div> 

    <div id='panel1' style='z-index:5; position:absolute; width:100px; height:100px; background-color:red'> 
    </div>

也許是這樣嗎？交換的位置爲2.

來源

2010-08-01 22:44:02 Mark

同樣 - panel2仍然出現在panel1上面！ – user246114 2010-08-01 22:47:12

您是否嘗試過在panel1上設置z-index風格？

來源

2010-08-01 22:43:13 Douglas

是剛剛嘗試過，同樣的問題 - 將更新上面的代碼。 – user246114 2010-08-01 22:47:55

css在windows和mac之間的FF/chrome上的絕對定位不同

回答

相關問題