如何使一个元素超出其父范围？

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; 
}