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

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