如何使一個元素超出其父範圍？

Question

我的HTML：

<div id="main"> 
    <div id="inner_div"></div> 
    </div> 

CSS：

#main{ 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
    margin: 10px auto; 
    position: relative; 
    } 
    #inner_div{ 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 

正如你可以看到，現在#main將在頁面中心，我不能改變#main的風格。我可以改變的#inner_div的風格，我希望把它在頁面的左側，所以我改變CSS來：

#inner_div{ 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    z-index: 2012; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

但#inner_div仍處於#main的範圍：

我的問題是，如何更改#inner_div的CSS而不是#main以使#inner_div破壞#main的邊界？小提琴：http://jsfiddle.net/9EYP6/1/

Answer 1

使用負向定位參數，例如：

left: -10px; 
top: -10px; 

Answer 2

@ wong2;你可能必須給positon負數

#inner_div{ 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    z-index: 2012; 
    position: absolute; 
    left: -10px; 
    top: -10px; 
}