我從堆疊概念中錯過了什麼？

我陷入困境，試圖找出HTML stacking concept。從我讀過的東西，在Z指數2 應div，以使其顯示在Z - 索引1的div上面...但it's not doing that。我從堆疊概念中錯過了什麼？

此代碼...


<style> 
body > div { height: 100px; width: 100px; } 

#blue { 
    position: relative; 
    top: 50px; 
    left: 50px; 
    z-index: 1; 
    overflow: auto; 
} 
#red { z-index: 2; } 
</style> 

<div id="blue"> 
    <div>blue</div> 
    <div>blue</div> 
    <div>blue</div> 
    <div>blue</div> 
    <div>blue</div> 
    <div>blue</div> 
    <div>blue</div> 
    <div>blue</div> 
</div> 
<div id="red">red</div>

......結果在一個藍色的div 以上紅格。將藍色的z-index更改爲-1最終將其置於紅色div之後，但滾動條停止工作。

我錯過了什麼？

來源

2013-03-12 harbichidian

'position：relative'使得它的位置與它的鄰居流動，而'position：absolute'使它與父級（這是'position'ed）的位置流動。所以：http://jsfiddle.net/userdude/qctH9/1/ – 2013-03-12 02:09:49

啊，z-index是包含在相對定位中的，那麼。當光標位於另一個元素的邊上時，爲什麼不能滾動工作，但是當它位於另一個元素的上方和下方時，它將工作？ – harbichidian 2013-03-12 02:12:45

你能更精確嗎？當鼠標位於藍色框上時，滾動功能正在瀏覽器中運行。外部或紅色和藍色之間的重疊區域，它不會滾動。 – abellina 2013-03-12 02:16:07