如何使用可調整大小的元素重疊其他元素？

Question

如何讓一個可調整大小的div不被相鄰元素重疊？我改變了可調整大小的div的z-index的有1個，其餘爲0。

這個例子會清楚的時候了： http://jsfiddle.net/gALUP/1/

HTML

<div id='grid'> 
    <div class='outline'> 
     <div class='container resizable'> 
     </div>  
    </div> 
    <div class='outline'> 
     <div class='container'> 
     </div>  
    </div> 
</div> 

CSS

.outline { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
    position: relative; 
    z-index: 0; 
    display: inline-block; 
} 
.container { 
    height: 100%; 
    width: 100%; 
    background-color: #ff0000; 
} 

.resizable { 
    background-color: #0000ff; 
    position: absolute; 
    z-index: 1; 
} 

Answer 1

刪除z-index: 0從：

.outline { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
    position: relative; 
    display: inline-block; 
} 
.container { 
    height: 100%; 
    width: 100%; 
    background-color: #ff0000; 
} 
.resizable { 
    background-color: #0000ff; 
    position: absolute; 
    z-index: 1; 
} 

http://jsfiddle.net/elclanrs/gALUP/2/